首頁 >web前端 >js教程 >Vue微信專案按需授權登入實戰案例詳解

Vue微信專案按需授權登入實戰案例詳解

php中世界最好的语言
php中世界最好的语言原創
2018-05-31 10:04:061806瀏覽

這次帶給大家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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn