如何解決Vue微信授權登入前後端分離的問題

這篇文章主要介紹了詳解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等實現了授權登入

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

如何解決Vue下路由History模式打包後頁面空白

Vue中$refs的用法

關於vue和vue-validator 表單驗證功能的實作

##

以上是如何解決Vue微信授權登入前後端分離的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！