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，就進行微信授權。這種做法開發過程比較方便，但是會在使用者未登入情況下發送了一些不必要的請求給後端，感覺不太好。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

如何操作vue專案打包給伺服器

#怎麼使用webstorm新增*.vue檔案

以上是Vue微信專案按需授權登入實戰案例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！