0

问题描述

部分用户存在访问公众号内页面时,提示授权失败。而且不是偶现,同一用户每次都无法授权成功。将错误抛出后,发现微信授权时,code为null
图片描述
图片描述
我知道上述两张图片的错误码不一致,是我没有保存下来。有一致的时候就是code为null

问题出现的环境背景及自己尝试过哪些方法

前端是vue框架+vue router + vuex
后端是java用的spring boot

(片段一)
我将获取code的代码写在项目的index.html页面,我的想法是已进入就获取code,然后去鉴权。代码如下,事实证明也是可以获取的,因为大部分用户是能正常登录的。
(片段二)
还有一个情况是,我的router里面,/index路由是指向home.vue页面。在home.vue加载的时候调用了两个接口,是需要登陆才能调用的,如果未登陆,后端报401错误码,我在axios的拦截器中,进行拦截,跳转到login(登陆接口)
(片段三)

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)
有两处获得code的代码

// 片段一
// index.html
// 网页授权之获取code
    const code = getUrlParam('code')
    let openId = window.localStorage.getItem('openId')
    if (!openId && !code) {
      const appid = 'wxxxxxxxxxx'
      let url = encodeURIComponent(location.href.split('#')[0])
      window.location.href = 'http://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' +
        url + '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
    }
    //获取url中参数
    function getUrlParam(name) {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
      var r = window.location.search.substr(1).match(reg)
      if (r != null) return r[2]
      return 'index'
    }
// 片段二
// axios拦截器
let loginHandle
let loginApiFlag = false
let goIndex = false
axios.interceptors.response.use((response) => {
    Toast.clear()
    fromatLog(0, response)
    let { status, data: { code, ...res } } = response
    if (status === 200) {
      // 成功的部分
      return
    }
    return Promise.reject(new Error('请求数据状态错误'))
  }, function (error) {
    Toast.clear()
    fromatLog(1, error)
    let config = error.config
    if (error.response.status === 401) {
      // 请求 login 接口
      if (!loginApiFlag) {
        loginApiFlag = true
        loginHandle = login()
      }
      // 将请求存放在handlers数组中
      return loginHandle.then(() => {
        return axios(config)
      })
    }
    if (goIndex) {
      window.location.href = '/index'
    }
    return Promise.reject(error)
  })
// 片段三
export const login = () => {
  let code = getUrlParam('code')
  return axios.post(`/api/login?code=${code}`)
}
//获取url中参数
    function getUrlParam(name) {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
      var r = window.location.search.substr(1).match(reg)
      if (r != null) return r[2]
      return 'index'
    }

你期待的结果是什么?实际看到的错误信息又是什么?

大部分的用户是能正常登陆的,有少部分用户一直是授权失败,机型是iphone,目前只能定位到code是null,我觉得应该是我路由跳转的时候有问题。可能没有进入index.html,导致没有进行code获取,因为当我在index.html上写上alert(code),都无法将code抛出,直接没有执行alert。

2019-08-08 提问
1 个回答
0

我之前也出现过code拿不到的情况,你可以参照我写的vue微信网页授权最终解决方案 我当时拿不到

 try {
      // 通过回调链接设置code status
      wechatAuth.returnFromWechat(to.fullPath)
    } catch (err) {
      // 失败,设置状态未登录,刷新页面
      store.dispatch('user/setLoginStatus', 0)
      location.reload()
    }
    // !!!!!!这里我直接判断if(wechatAuth.code)就不行,我赋值到code就可以,之后就没有出现过类似的情况
        const code = wechatAuth.code
    if (code) {
    }
    

微信授权坑很多,一点点来吧

撰写答案

推广链接