微信授權登入是一個非常常見的場景,利用微信授權登入,我們可以很容易獲取使用者的一些資訊,通過使用者對公眾號的唯一openid從而建立資料庫繫結使用者身份.
微信授權登入的機制這裡不做詳述,微信官方文件已有詳述,簡述就是通過跳轉微信授權的頁面,使用者點選確認後,微信會跳到回撥頁面,此時回撥頁面url上會攜帶code引數,通過code引數,後端可以拿code換取擁護openid,或者使用者資訊

router.beforeEach(async (to, from, next) => {
  if (to.matched.some(recode => recode.meta.noAuth)) {
    next()
  } else
 
 {
    // store已存在使用者資訊直接進入頁面
    if (store.state.userInfo.nickname) {
      next()
      return
    }
    const code = getUrl(window.location.href).code // 擷取url上的code ,可能沒有,則返回''空字串
    let res = await api.post('/imsl/user/user-auth', {code}) // 獲取使用者資訊,後端可首先通過cookie,session等判斷,沒有資訊則通過code獲取
    console.log(res)
    // 返回使用者資訊
 

    if (res.code === 200 && res.data.is_auth) {
      store.commit('setUserInfo', res.data)
      next()
    } else {
      // 此狀態根據業務需求 可能不存在
      if (res.code === 201) {
        const openid = res.data.openid
        console.log(openid)
        store.commit('setOpenid', openid)
        localStorage.setItem('openid'
 
, openid)
        next('/enlist-info')
      }
      // 上面的獲取使用者資訊介面,如果cookie,session拿不到使用者資訊,且傳遞的code為空,則跳轉到微信授權頁面
      if (res.code === 202) {
        console.log(window.location.origin)
        console.log(to.fullPath)
        // 這個redirectUrl用 當前頁路徑或者tof.fullPath(將要進入的路徑)
        let redirectUrl = window.location.href
        redirectUrl = encodeURIComponent(redirectUrl)
        console.log(redirectUrl)
        const appid='wxdff0642c2120ea39'
        window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
      }
    }
  }
})

　　上述程式碼基本闡述了一個授權的過程,首先,我們在配置vue路由的時候,設定此路由是否需要登入即給router的meta加一個noAuth:true的屬性,這個是處理不需要登入的頁面,通過router.beforeEach進行判斷,如果是不需要登入的頁面:noAuth,則直接next()讓其進入相應頁面.對於需要登入的頁面,則讓後端配合,此時,後端寫一個獲取使用者資訊的介面,前端則直接呼叫獲取使用者資訊的介面,當然,不需要每個頁面都呼叫,獲取一次之後可以將使用者資訊存入vuex中,所以通過判斷vuex裡面有沒有使用者資訊,如果已存在使用者資訊,則進入頁面.沒有使用者資訊那就呼叫後端獲取使用者資訊的介面,說到這裡,終於回到此文主題了,使用者資訊是通過微信授權登入拿到的,此時後端如何拿到使用者資訊呢?這裡,可以跟後端商議好,使用者繫結身份後,後端則可以通過設定cookie,token之類的儲存這個使用者登入狀態,如果有相關狀態,那麼後端則可以直接返回使用者資訊. 如果是首次進入,或者cookie,token之類的已失效,那麼此時則會呼叫微信授權登入了,如上述程式碼所述,分為三種情況,
　　1. 通過cookie,token等,後端直接拿到了使用者資訊,此時則拿到使用者資訊直接進入頁面,同時把使用者資訊存入vuex中
　　2. 沒有使用者資訊的情況,此時也沒有cookie,token,那就需要重新呼叫微信授權登入了,上面給出的兩種返回碼code=201,code=202的情況,當code=2是則由前端直接跳轉到微信授權頁面,而redirectUri則為將要進入的頁面,此時會發生什麼呢?會跳到微信授權頁面,使用者點選之後又回到了這個頁面,不同的是此時url上面已經攜帶了code,前端通過字串擷取拿到code,傳送給後端,後端即可通過code換取openid以及使用者資訊了.
　　總結:
1. 專案採用前後端完全分離方式,即打包後給的純靜態檔案放在伺服器,訪問index.html
2. 後端不在介面處攔截,不需要後端跳轉微信授權登入頁面,由前端路由來攔截跳轉,實現方法如3.
3. 前端在需要使用者身份才能進入的頁面通過vue-router的 router.beforeEach鉤子函式攔截,此時呼叫獲取使用者資訊介面,後端首先通過獲取cookie,token等判斷使用者,無相關資訊返回201或202,當返回202的時候,前端跳轉到微信授權頁,redirecturi即為要進入的頁面的url,跳轉授權後微信會在url上面攜帶code回到當前頁,此時前端擷取url上的code傳給後端,後端通過code在後端處理拿到使用者資訊,openid等實現了授權登入
## 檢視原文https://blog.noob6.com/2018/06/16/the-best-way-to-resolve-wechat_auth-in-vue/