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/…