Vue 微信网页授权自动登录

项目需求:微信公众号(服务号)访问网页,第一次登录后,再次访问默认自动登录,执行退出后,可重新手动登录。

具体实现如下:
  1. 微信公众号 - 设置 - 公众号设置 - 功能设置 - 配置网页授权域名,用于获取授权code

(以下是订阅号截图,服务号对应位置配置网页授权域名地址)

在这里插入图片描述

  1. 微信公众号 - 开发 - 开发者工具 - 绑定开发者微信号,用于调试
    在这里插入图片描述
  2. 前端使用 appid 调用授权获取code,用code调用接口获取对应的openid实现自动登录
// 以下为具体实现代码
 async mounted () {
   // 判断是否包含code
   const href = window.location.href
   if (href.includes('mp-fe/?code')) { // url包括 mp-fe/?code 证明为从微信跳转回来的
     const url = href.substring(0, href.length - 2) // vue自动在末尾加了 #/ 符号,截取去掉
     const jingPosit = url.indexOf('mp-fe/') + 6 // 获取域名结束的位置
     const urlLeft = url.substring(0, jingPosit) // url左侧部分
     const urlRight = url.substring(jingPosit, url.length) // url右侧部分
     window.location.href = urlLeft + '#/' + urlRight // 拼接跳转
   } else {
     // 判断是否为微信环境
     const ua = navigator.userAgent.toLowerCase()
     if (ua.match(/MicroMessenger/i) == 'micromessenger') {
       // 第一次登录或退出登录,获取code
       if (!this.$route.query.code && !localStorage.OPEN_ID) {
         const appid = '对应appid'
         const redirectUrl = encodeURIComponent(window.location.href)
         const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_base&state=2020&connect_redirect=1#wechat_redirect`
         window.location.href = url
       // 使用code获取openid
       } else if (this.$route.query.code && !localStorage.OPEN_ID) {
         // 获取openid
         const userInfo = await getOpenId({ code: this.$route.query.code })
         if (userInfo.data.openId && userInfo.data.openId !== null) {
           localStorage.OPEN_ID = userInfo.data.openId
           localStorage.autoLogin = false
         }
         this.$router.push('/')
       // 处理自动登录
       } else if (localStorage.OPEN_ID) {
         if (localStorage.autoLogin === 'true') {
           const res = await chkLog({ openId: localStorage.OPEN_ID })
           if (res.data.data.success) {
             this.saveUserInfo(res.data.data)
             localStorage.setItem('userid', res.data.data.sessionid)
             localStorage.userId = res.data.data.userId
             this.$router.push('/home')
           }
         }
       }
     }
   }
 },
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值