h5公众号一进来就调取授权登录

最新推荐文章于 2024-07-07 16:39:23 发布

小姑娘笔记总结

最新推荐文章于 2024-07-07 16:39:23 发布

阅读量537

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/LZL_68/article/details/126955504

版权

第一种是直接进来调取授权登录：

判断是否存在token
判断是否存在state和code
判断后端返回来的tokenId
登录失效重新调取授权

第一个判断是否有token：

如果存在token，就直接一进来就调用列表数据
不存在token的话，就去判断是否存在code和state

第二是判断是否存在code和state：

如果存在code和state的话，就直接调取授权登录
如果不存在code和state，就重新调取授权登录

第三步是直接授权登录：

判断后端返回来的字段是否存在

存在的话，就直接调取列表数据
不存在的话，就去调取登录注册页面

第四步是登录失效，报401

在request.js文件写入


import { Toast, Dialog } from 'vant'
import router from '@/router' 
Dialog.alert({
          message: res.msg
        }).then(() => {
          router.push({ name: 'Home', query: { state_code : 'status' } })
        })

2.在主页中，获取路由传参

const status = this.$route.query.status_code
if(status){
    //调取授权
}else {
    //走前面三部
}

截取授权跳转获取的state，id还有code ，在public文件下新建一个html文件，代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // let href = window.location.href;
        // let auth_code = window.location.auth_code;
        let code = getQueryVariable('code')
        let state = getQueryVariable('state')
        let id = getQueryVariable('id')
        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) { return pair[1]; }
            }
            return (false);
        }
        let url = `http:...?code=${code}&state=${state}&id=${id}`//http是后端给的
        window.location.href = url
        console.log(url,'url')
        console.log(code)
        console.log(id)
        console.log(state)
    </script>
</head>

<body>
</body>

</html>

调取授权代码：

getLogin () {
      var ua = navigator.userAgent.toLowerCase() // 判断是否是微信浏览器
      var isWeixin = ua.indexOf('micromessenger') !== -1 // 判断是否
      if (!isWeixin) {
        Toast('请在微信浏览器中打开')
        return false
      }
      const token = this.$store.state.token
      if (!token) {
        console.log('没有token登录')
        const appid = ''//后端提供
        const url = '' //后端提供跳转的地址
        window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${url}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
      }
    },

授权登录代码：

// 进来有传参就授权登录
    getWxLogin (code, state) {
      const data = {
        code,
        state
      }
      this.$toast.loading({
        duration: 0,
        forbidClick: true,
        mask: true,
        message: '加载中...'
      })
      wxLogin(data).then(res => {
        this.$toast.clear()
        const data = res.data
        this.openid = data.openid
        this.apitoken = data.apitoken
        if (data.openid) {
          this.$store.commit('SET_OPENID', data.openid)
        }
        // 新用户弹窗绑定手机号
        if (!data.apitoken) {
          this.$refs.login.show = true
        } else {
          // this.$store.commit('c', data.apitoken)
          localStorage.setItem('token', data.apitoken)
          this.getList()
          this.getuserInfo()
        }
      })
    }

官方授权接口：

// 微信授权
export function wxLogin (params) {
  return request({
    url: 'http:..../login/wechat',
    method: 'get',
    params
  })
}

第二种页面点击某个按钮授权：

判断是否含有token
判断是否含有state和code还有id

如果存在token：直接调取页面数据
不存在token的话，就判断是否含有state和code还有id
如果存在state和code还有id，就直接调取授权登录
不存在state和code等，就调取授权

小姑娘笔记总结

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫