后台管理使用微信扫码登录(小程序登录)

  1. 后台管理登录页添加一个微信登录按钮,点击弹窗二维码
    在这里插入图片描述
    在这里插入图片描述

代码实现:

/**
 * 该页面原本是用户协议页(产线页面),目前接入微信授权登录功能
 * 原因:微信扫码登录,后端生成的二维码仅能跳转当前 生产环境小程序 存在的页面,而此功能开发时,当前生产环境不存在授权页,因此只能用现有的页面进行开发
 * 后续:1.此版本提交一个空白页,下个版本将此页面转移到新提交的空白页
 *      2.另加一页空白页,以备今后版本不时之需
 *      3.由于有“打包时过滤无依赖文件”的设定,新家的备用页需要在某个恒为false的条件下进行引用,以跳过此过滤
 */
async handlewxLogin () {
      console.log('点击按钮')
      // 1、请求后端接口,获取一个唯一的标识flagId
      const flagId = await this.$service.wxpc.getflagId()
      // 2、生成小程序码(需传入小程序已经发布版本的页面)
      const res = await this.$service.wxpc.getloginQr({ page: 'pages/login/user-agreement', scene: flagId })
      this.qrData = config.API_BASE_URL + res.replace('api', '')
      this.wxVisible = true
      // 3、轮训判断是否已登录
      let time = ''
      time = setInterval(async () => {
        const userInfo = await this.$service.wxpc.getqueryFlag({ flagId })
        if (userInfo && userInfo.token) {
          // 保存token
          await this.$store.dispatch('user/setToken', userInfo.token)
          // 跳转首页
          this.$router.push('/')
          // 登录有token 清除定时器
          clearInterval(time)
        }
      }, 1500)
    }
  1. 小程序中在已经发布的旧页面中写微信登录页面(之后发布新版可以移到登录页),点击按钮登录后,pc的轮询接口能通过flagId同步得到token登录。
    代码实现:
onLoad(options => {
  const scene = options?.scene || '' // 跟主要登录无关,用于判断旧页面其他功能
  if (!scene) return
  if (scene) {
    // 微信扫码登录
    uni.setNavigationBarTitle({ title: '授权登录' })
    flagId.value = scene
    pageType.value = 'login' // 判断登录模块功能
    // getCode()
  }
})
// 1、点击登录按钮
const submitLogin = async function (event: any) {
  console.log('点击按钮', event)

  const { encryptedData, iv } = event.detail
  if (encryptedData == null || iv == null) return uni.showToast({ icon: 'none', title: '需要允许获取用户手机号授权' })
  requestLogin(event)
}
// 2、执行登录
async function requestLogin (event: any) {
  if (!flagId.value) return
  const { encryptedData, iv } = event.detail
// 3、授权登录
  const userInfo = await service.app.loginByPcWeixin({
    flagId: flagId.value,
    encryptedData,
    iv
  })
  console.log({ userInfo })
  // 4、登录的逻辑 比如存储token、跳转路由
  logicFuntion(userInfo)
}

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值