Vue微信項目按需授權(quán)登錄策略實踐思路詳解

更新時間：2018年05月07日 17:39:02 作者：FrankCheung

這篇文章主要介紹了Vue微信項目按需授權(quán)登錄策略實踐思路詳解,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下

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

一種是需要用戶先登錄之后才能繼續(xù)瀏覽；
另一種是用戶無需登錄即可隨意瀏覽。

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

思路

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

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

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

對于用戶未登錄狀態(tài)下進行的需要用戶信息的操作，按照我目前的理解，即使是基于微信的靜默授權(quán)，頁面也必須重新刷新，無法做到真正無感授權(quán)并且繼續(xù)用戶的操作。因此我選擇在前端層面給用戶更友好的提示，讓用戶了解授權(quán)過程，缺點是前一次操作僅僅是觸發(fā)授權(quán)登陸，授權(quá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)進行微信授權(quán)
        if (hasAuthed()) {
          // 進行過微信授權(quán)之后，重定向回來的url中包含了微信的授權(quán)信息，可以將url上截取的參數(shù)發(fā)送到服務(wù)器，換取用戶的token，隨后進入上述有token時候的步驟
          getWechatUserInfo().then(res => {
            resolve()
          })
        } else {
          // 用戶尚未進行微信授權(quán)，則調(diào)用微信授權(quá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})
   })
}

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

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

根據(jù)上面的邏輯，進入白名單之后，整個函數(shù)已經(jīng)被return掉，不會進入下面的鑒權(quá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)進行微信授權(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)進行微信授權(quán)
        if (hasAuthed()) {
          // 進行過微信授權(quán)之后，重定向回來的url中包含了微信的授權(quán)信息，可以將url上截取的參數(shù)發(fā)送到服務(wù)器，換取用戶的token，隨后進入上述有token時候的步驟
          getWechatUserInfo().then(res => {
            resolve()
          })
        } else {
          // 用戶尚未進行微信授權(quán)，則調(diào)用微信授權(quá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，就進行微信授權(quán)。這種做法開發(fā)過程比較方便，但是會在用戶未登錄情況下發(fā)送了一些不必要的請求給后端，感覺不太好。

總結(jié)

以上所述是小編給大家介紹的Vue微信項目按需授權(quán)登錄策略實踐思路詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: