Vue微信項目如何實現(xiàn)按需授權(quán)登錄策略

這篇文章主要為大家展示了“Vue微信項目如何實現(xiàn)按需授權(quán)登錄策略”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Vue微信項目如何實現(xiàn)按需授權(quán)登錄策略”這篇文章吧。

項目采用Vue作為開發(fā)框架，用戶瀏覽頁面時有兩種情況：

1. 一種是需要用戶先登錄之后才能繼續(xù)瀏覽；

2. 另一種是用戶無需登錄即可隨意瀏覽。

在無需用戶登錄的頁面中，可能包含需要用戶信息的操作，此時就需要用戶登錄之后方能進(jìn)行后續(xù)操作。因此，需要對授權(quán)登錄策略進(jìn)行區(qū)分。

思路

1.一般而言，我們?yōu)槲⑿砰_發(fā)的H5頁面，進(jìn)入頁面的時候就進(jìn)行鑒權(quán)，要求用戶登錄之后才能繼續(xù)瀏覽。但由于產(chǎn)品需求，這個項目我們需要對不同頁面的鑒權(quán)策略進(jìn)行劃分，按照一般與特殊進(jìn)行設(shè)計：

2.一般情況，用戶進(jìn)入頁面第一時間要求用戶授權(quán)登錄，按照常規(guī)的微信授權(quán)登錄流程，登錄之后，用戶繼續(xù)瀏覽。

3.特殊情況，為無需用戶登錄的頁面配置白名單，只要進(jìn)入存在于白名單的路由，不進(jìn)入檢測用戶登錄狀態(tài)的函數(shù)，直接渲染頁面。

對于用戶未登錄狀態(tài)下進(jìn)行的需要用戶信息的操作，按照我目前的理解，即使是基于微信的靜默授權(quán)，頁面也必須重新刷新，無法做到真正無感授權(quán)并且繼續(xù)用戶的操作。因此我選擇在前端層面給用戶更友好的提示，讓用戶了解授權(quán)過程，缺點是前一次操作僅僅是觸發(fā)授權(quán)登陸，授權(quán)登錄后，用戶需要再次進(jìn)行操作。

// routerRule.js
export default function routerRule (router, whiteList = []) {
  // other codes...
  router.beforeEach( (to, from, next ) => {
    // 因為授權(quán)登錄涉及異步操作，因此使用promise，成功的回調(diào)中調(diào)用next函數(shù)
    new Promise((resolve, rejects) => {
      if ( whiteListRouter.indexOf(to.path) !== -1 ) {
        resolve()
        return
       }
      // 常規(guī)頁面授權(quán)登錄過程
      if (hasToken()) {
        // codes，獲取用戶信息并且跳轉(zhuǎn)所需跳轉(zhuǎn)的頁面
      } else {
        // 判斷用戶是否已經(jīng)進(jìn)行微信授權(quán)
        if (hasAuthed()) {
          // 進(jìn)行過微信授權(quán)之后，重定向回來的url中包含了微信的授權(quán)信息，可以將url上截取的參數(shù)發(fā)送到服務(wù)器，換取用戶的token，隨后進(jìn)入上述有token時候的步驟
          getWechatUserInfo().then(res => {
            resolve()
          })
        } else {
          // 用戶尚未進(jìn)行微信授權(quán)，則調(diào)用微信授權(quán)的方法，進(jìn)行授權(quán)登錄。
          getWechatAuth()
        }
      }
    }).then( res => {
      next()
    })
  })
  router.afterEach(( to, from ) => {
    wxShare({ title: to.meta.title, desc: to.meta.shareDesc, link: to.meta.shareLink, logo: to.meta.shareLogo})
   })
}

本項目是在用戶初次進(jìn)行微信綁定時，就將用戶的微信信息與本站的用戶信息進(jìn)行的綁定，因此在獲取用戶微信授權(quán)信息后，就可以獲取到用戶的token，從而獲取用戶在本站的其他用戶信息。

在無需登錄頁面的進(jìn)行需要權(quán)限的操作的處理

根據(jù)上面的邏輯，進(jìn)入白名單之后，整個函數(shù)已經(jīng)被return掉，不會進(jìn)入下面的鑒權(quán)過程。但是如果是在此種頁面上進(jìn)行需要權(quán)限的操作，那么就需要觸發(fā)授權(quán)登錄流程，并且在授權(quán)之后，要一并獲取用戶信息。

// checkLogin.js
export function checkLogin({ redirectUrl, wxAuthLoading, wxAuthLoaded, callback } = {}) {
  if (getToken()) {
    // ...
    callback && callback()
  } else {
    // 提示用戶正在授權(quán)中
    wxAuthLoading && wxAuthLoading()
    getWechatAuth( redirectUrl || window.location.href ).then( res => {
      // 授權(quán)完畢，提示用戶授權(quán)成功
      wxAuthLoaded && wxAuthLoaded()
    })
  }
}

同時，我們需要對路由白名單添加一些操作

// routerRule.js
export default function routerRule (router, whiteList = []) {
  // other codes...
  router.beforeEach( (to, from, next ) => {
    // 因為授權(quán)登錄涉及異步操作，因此使用promise，成功的回調(diào)中調(diào)用next函數(shù)
    new Promise((resolve, rejects) => {
      if ( whiteListRouter.indexOf(to.path) !== -1 ) {
        // 如果已經(jīng)進(jìn)行微信授權(quán)但是沒有token值的，就調(diào)用以下函數(shù)獲取token值
        if ( !hasToken() && hasAuthed() ) {
          getWechatUserInfo().then(res => {
            resolve()
          })
        }
        resolve()
        return
       }
      // 常規(guī)頁面授權(quán)登錄過程
      if (hasToken()) {
        // codes，獲取用戶信息并且跳轉(zhuǎn)所需跳轉(zhuǎn)的頁面
      } else {
        // 判斷用戶是否已經(jīng)進(jìn)行微信授權(quán)
        if (hasAuthed()) {
          // 進(jìn)行過微信授權(quán)之后，重定向回來的url中包含了微信的授權(quán)信息，可以將url上截取的參數(shù)發(fā)送到服務(wù)器，換取用戶的token，隨后進(jìn)入上述有token時候的步驟
          getWechatUserInfo().then(res => {
            resolve()
          })
        } else {
          // 用戶尚未進(jìn)行微信授權(quán)，則調(diào)用微信授權(quán)的方法，進(jìn)行授權(quán)登錄。
          getWechatAuth()
        }
      }
    }).then( res => {
      next()
    })
  })
  // other codes...
}

坑點以及不完善的地方

1.這個方案在用戶授權(quán)之后，在路由跳轉(zhuǎn)之前，一定要先獲取用戶信息，否則在url上的微信授權(quán)信息就會丟失，獲取用戶信息就會失敗。

2.這個方案的缺點在于，需要開發(fā)者對在免登陸頁面的所有需權(quán)限操作都加上checkLogin判斷。由于這種需權(quán)限的操作一般都是發(fā)送異步請求，所以如果不考慮減少不必要的異步請求的情況下，可以統(tǒng)一在請求的方法上設(shè)置攔截器，判斷后端返回的code，如果返回的是用戶未登錄的code，就進(jìn)行微信授權(quán)。這種做法開發(fā)過程比較方便，但是會在用戶未登錄情況下發(fā)送了一些不必要的請求給后端，感覺不太好。

以上是“Vue微信項目如何實現(xiàn)按需授權(quán)登錄策略”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！