Vue微信項目按需受權登陸策略實踐

寫在前面

項目採用Vue做爲開發框架，用戶瀏覽頁面時有兩種狀況：

1. 一種是須要用戶先登陸以後才能繼續瀏覽；
2. 另外一種是用戶無需登陸便可隨意瀏覽。

在無需用戶登陸的頁面中，可能包含須要用戶信息的操做，此時就須要用戶登陸以後方能進行後續操做。所以，須要對受權登陸策略進行區分。

思路

通常而言，咱們爲微信開發的H5頁面，進入頁面的時候就進行鑑權，要求用戶登陸以後才能繼續瀏覽。但因爲產品需求，這個項目咱們須要對不一樣頁面的鑑權策略進行劃分，按照通常與特殊進行設計：

1. 通常狀況，用戶進入頁面第一時間要求用戶受權登陸，按照常規的微信受權登陸流程，登陸以後，用戶繼續瀏覽。
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，就進行微信受權。這種作法開發過程比較方便，可是會在用戶未登陸狀況下發送了一些沒必要要的請求給後端，感受不太好。

這是本人開發過程當中想到的不成熟的方案，若是有更好的方法，請不吝告知，謝謝！