vue.js / nuxt.js 微信公众号判断是否在微信浏览器中打开并授权

首先, 看到这个需求, 应该知道这段代码要放在路由守卫中, 每次路由的变化都要触发这个校验

然后...话不多说, 看代码吧

// afterEach有待商榷, 我觉得beforeEach应该会更好, 是不是刚进项目时, beforeEach有点问题? 我试试后再追加.
app.router.afterEach(async (to,from)=>{
    // 非微信浏览器跳转到此页 - notwechatbrowse
    // 校验微信浏览器
    // &&后面条件不能少, 否则会出现死循环
    if(!/MicroMessenger/i.test(navigator.userAgent) && to.name.indexOf('notwechatbrowse')==-1){
      window.location.href = '/notwechatbrowse';
      return;
    }else if(to.name.indexOf('notwechatbrowse')!=-1){
      return;
    }

    // 所有页面都请求授权
    let localToken = getCookie("token")
    let code = to.query.code
    let state = to.query.state
    if(localToken){
      // 如果本地已经缓存token, 直接请求用户信息
      let res = await token()
      store.state.userInfo = JSON.parse(res.data)
    }else{
      // 如果没有token但有code, 根据code来获取token
      if(code){
        let res = await accessToken({
          code: code,
          state: state
        })
        if(res.data.openid){
          let userInfo = JSON.parse(res.data.user)
          store.state.userInfo = userInfo
          addStatistics({code:'gzh_auth'})
          setCookie('token', res.data.openid, 30)
        }
      }else{
        // 什么都没有 要用户重新授权 获取用户信息 (走一遍注册流程)
        wechat_authorize_userinfo(window.location.href)
      }
    }


  })