【uniapp】uniapp实现单点登录、打包H5部署到线上

老规矩,先赞后看，一键三连！！！

1，准备工作

前端： hbuilderX编辑器下载地址：www.dcloud.io/hbuilderx.h...

部署软件：xshell xftp 下载地址www.xshell.com/zh/xftp/ www.xshell.com/zh/xshell/

2，单点登录

实现思路: 第三方大平台那边点击按钮跳转到子平台, url中?拼接code,或者token等其他字段,然后子平台这边调接口携带这个入参, 接口返回的就是处理过后的用户信息, 具体怎么处理的这个是后端写的,咱前端能拿到用户信息就行, 拿到了就可以根据用户权限跳转到对应的路由页面了。如果第三方大平台和子系统共用一个后端接口的话, 跳转验证用户权限的时候不用再重复调接口了,直接跳转就行. 图文版如下图所示:

1，第三方平台跳转和Nginx重定向

点击按钮, 跳转后携带参数,一般为:xxx.com/app/?code=x...,

然后后端nginx那边处理,给重定向到前端的登录页, 例如:xxx.com/app/?code=x...

2，前端登录页处理

获取地址栏上的参数，调接口验证用户信息

uniapp在onload中写，pc端在mounted中写，都差不多，这边以uniapp为例

js 复制代码

 let searchParams = new URLSearchParams(new URL(window.location).search)
 // searchParams.has('xxx') 表示是否有这个字段
 // searchParams.get('xxx') 表示获取这个字段的值
  if (searchParams.has('code') || searchParams.has('redirectUri')) {
      uni.showLoading({ title: '自动登录中...', mask: true })
      let params = {
        code: searchParams.get('code'),
        xxxxx
      }
      // 调接口验证用户信息
      getUserInfo(params).then((res) => {
        if (res) {
          let redUrl = '/index/index'
          // 如果跳转携带的链接中有url，就获取这个url跳转到对应的页面中，没有就默认跳index
          if (searchParams.has('redUrl')) {
            redUrl = searchParams.get('redUrl')
          }

          // 清空地址栏的参数，重新组合跳转的链接
          const cleanUrl = `${window.location.origin}${window.location.pathname}#/pages${redUrl}`
          window.history.replaceState({}, document.title, cleanUrl)
          
           // 影藏loading，开始跳转
           uni.hideLoading()
           uni.switchTab({ url: '..' + redUrl })
        }
      })
    }

到这里，单点登录基本上就可以实现了，子系统无需二次登录，直接从大平台登录后点击跳转按钮过来即可无缝衔接进入子系统。

3，redUrl携带具体参数id

还有一种就是，跳转链接携带了登录后进入redUrl的页面，然后redUrl后面还拼接了id，查询具体的某个数据。例如： xxx.com/app/?code=x...

也不算太麻烦，通过获取到redUrl参数后，再截取一下，取下标为1的就是id的值了，把id存起来，等跳转到页面里查询数据的时候，把这个id带上，就可以查询到具体的数据了。

代码如下：登录页

js 复制代码

// 基于等二点的代码修改
...
          // 如果跳转携带的链接中有url，就获取这个url跳转到对应的页面中，没有就默认跳index
          if (searchParams.has('redUrl')) {
            redUrl = searchParams.get('redUrl')
            
            // 有id就存起来
            let id = redUrl.split('=')[1]
            if (id) uni.setStorageSync('redId', id)
          }
...

redUrl所在的页面 onshow或者onload

js 复制代码

    // 获取页面数据的方法
    getList(){
        let params = {
            pageNo: 1,
            pageSize: 100,
            id: uni.getStorageSync('redId')
        }
        // 调接口获取指定内容
        xxxxx().then(res=>{
        .....
        })
    }

ok，这样就实现了单点登录到指定页面查询指定数据的功能了。

2，打包h5

1，前端配置

找到manifest.json文件，点击Web配置，重点看这个运行的基础路径，他是打包部署后显示页面的关键，配置错了访问线上地址会出现页面空白的问题。如下图所示：

一般都是 ./, 表示相对路径，还可以写其他的，例如/h5/,/app-h5/ 取决于你nginx那边的配置目录。

2，后端nginx配置

Nginx配置如下图所示:

js 复制代码

    location /app{ // 这个访问项目的链接地址的文件夹名
        alias /xxx/xxx; // 这个是你打的包在服务器的地址
        try_files $uri $uri/ /index.html;
       // try_files $uri $uri/ /h5/index.html;
       // try_files $uri $uri/ /app-h5/index.html;
        index index.html;
    }

搭配着来弄就可以了，实在不行直接 ./ 吧。

3，打包

配置完点击发行，点击 网站-PC Web或手机H5(H)，如下图所示：

网站标题就是访问的时候页面中间显示的标题，网站域名可填可不填，其他不用勾选，弄好点击发行即可，如下图所示：

打包完成后，文件在unpackage文件中，只要web文件夹里面的文件就行，其他不用，文件路径如下图所示：

4，部署

准备xshell和xftp这两个软件，xshell连接服务器用的。登录的账号密码以及其他配置可以咨询你们后端。

连接成功点击顶部这个绿色按钮可以进入可视化部署的操作界面，不用敲指令。

找到前端部署文件的地方，把刚刚打包完的web文件夹粘贴过来就可以了。然后访问线上地址，看看能不能成功进入。

到这里基本实现需求了。

📢记录一下工作中遇到的问题及解决方法，如有错误，欢迎留言。

📢如果此篇博文对您有帮助，还请动动小手点赞 👍 收藏 ⭐留言 📝呐~，谢谢~~