Vue微信項目如何實現按需授權登錄策略

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

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

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

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

在無需用戶登錄的頁面中，可能包含需要用戶信息的操作，此時就需要用戶登錄之后方能進行后續操作。因此，需要對授權登錄策略進行區分。

思路

1.一般而言，我們為微信開發的H5頁面，進入頁面的時候就進行鑒權，要求用戶登錄之后才能繼續瀏覽。但由于產品需求，這個項目我們需要對不同頁面的鑒權策略進行劃分，按照一般與特殊進行設計：

2.一般情況，用戶進入頁面第一時間要求用戶授權登錄，按照常規的微信授權登錄流程，登錄之后，用戶繼續瀏覽。

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

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

// routerRule.js
export default function routerRule (router, whiteList = []) {
  // other codes...
  router.beforeEach( (to, from, next ) => {
    // 因為授權登錄涉及異步操作，因此使用promise，成功的回調中調用next函數
    new Promise((resolve, rejects) => {
      if ( whiteListRouter.indexOf(to.path) !== -1 ) {
        resolve()
        return
       }
      // 常規頁面授權登錄過程
      if (hasToken()) {
        // codes，獲取用戶信息并且跳轉所需跳轉的頁面
      } else {
        // 判斷用戶是否已經進行微信授權
        if (hasAuthed()) {
          // 進行過微信授權之后，重定向回來的url中包含了微信的授權信息，可以將url上截取的參數發送到服務器，換取用戶的token，隨后進入上述有token時候的步驟
          getWechatUserInfo().then(res => {
            resolve()
          })
        } else {
          // 用戶尚未進行微信授權，則調用微信授權的方法，進行授權登錄。
          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})
   })
}

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

在無需登錄頁面的進行需要權限的操作的處理

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

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

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

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

坑點以及不完善的地方

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

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

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