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)
      }
    }


  })