Vue微信授權登入前後端分離較為優雅的解決方案

勇PAN高峰2發表於2018-06-28
Vue後端

  微信授權登入是一個非常常見的場景,利用微信授權登入,我們可以很容易獲取使用者的一些資訊,通過使用者對公眾號的唯一openid從而建立資料庫繫結使用者身份. 微信授權登入的機制這裡不做詳述,微信官方文件已有詳述,簡述就是通過跳轉微信授權的頁面,使用者點選確認後,微信會跳到回撥頁面,此時回撥頁面url上會攜帶code引數,通過code引數,後端可以拿code換取擁護openid,或者使用者資訊   在vue專案中,通常是一個SPA應用,即所有的頁面都是同一個html,通常現在開發也是前後端徹底分離的,vue打包後生成的純靜態檔案,甚至可以不經過伺服器,所以通過後端弄跳轉之類的都不太優雅,本文即介紹此類場景的微信授權登入   對於一個vue的SPA應用,我們通常可能有很多頁面,在微信公眾號上我們可能配置多個選單,多個選單對應vue的路由頁面,但是可能並不是每個頁面都需要使用者授權才能進入,有些頁面使用者不登入也需要可以預覽,此時我們可以通過vue router來實現前端路由攔截

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等實現了授權登入 檢視原文blog.noob6.com/2018/06/16/…

相關文章