欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2018年05月07日 17:39:02   作者:FrankCheung  
這篇文章主要介紹了Vue微信項(xiàng)目按需授權(quán)登錄策略實(shí)踐思路詳解,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

項(xiàng)目采用Vue作為開發(fā)框架,用戶瀏覽頁(yè)面時(shí)有兩種情況:

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

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

思路

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

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

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

對(duì)于用戶未登錄狀態(tài)下進(jìn)行的需要用戶信息的操作,按照我目前的理解,即使是基于微信的靜默授權(quán),頁(yè)面也必須重新刷新,無(wú)法做到真正無(wú)感授權(quán)并且繼續(xù)用戶的操作。因此我選擇在前端層面給用戶更友好的提示,讓用戶了解授權(quán)過(guò)程,缺點(diǎn)是前一次操作僅僅是觸發(fā)授權(quán)登陸,授權(quán)登錄后,用戶需要再次進(jìn)行操作。

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

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

在無(wú)需登錄頁(yè)面的進(jìn)行需要權(quán)限的操作的處理

根據(jù)上面的邏輯,進(jìn)入白名單之后,整個(gè)函數(shù)已經(jīng)被return掉,不會(huì)進(jìn)入下面的鑒權(quán)過(guò)程。但是如果是在此種頁(yè)面上進(jì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()
    })
  }
}

同時(shí),我們需要對(duì)路由白名單添加一些操作

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

坑點(diǎn)以及不完善的地方

1.這個(gè)方案在用戶授權(quán)之后,在路由跳轉(zhuǎn)之前,一定要先獲取用戶信息,否則在url上的微信授權(quán)信息就會(huì)丟失,獲取用戶信息就會(huì)失敗。

2.這個(gè)方案的缺點(diǎn)在于,需要開發(fā)者對(duì)在免登陸頁(yè)面的所有需權(quán)限操作都加上checkLogin判斷。由于這種需權(quán)限的操作一般都是發(fā)送異步請(qǐng)求,所以如果不考慮減少不必要的異步請(qǐng)求的情況下,可以統(tǒng)一在請(qǐng)求的方法上設(shè)置攔截器,判斷后端返回的code,如果返回的是用戶未登錄的code,就進(jìn)行微信授權(quán)。這種做法開發(fā)過(guò)程比較方便,但是會(huì)在用戶未登錄情況下發(fā)送了一些不必要的請(qǐng)求給后端,感覺不太好。

總結(jié)

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

相關(guān)文章

  • vue3中ref動(dòng)態(tài)綁定的技巧詳解

    vue3中ref動(dòng)態(tài)綁定的技巧詳解

    這篇文章主要為大家詳細(xì)介紹了vue3中ref動(dòng)態(tài)綁定的相關(guān)技巧,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以了解一下
    2024-01-01
  • 詳解Vue.directive 自定義指令

    詳解Vue.directive 自定義指令

    這篇文章主要介紹了Vue.directive 自定義指令,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • 查看vue版本號(hào)以及vue/cli腳手架版本號(hào)方式

    查看vue版本號(hào)以及vue/cli腳手架版本號(hào)方式

    這篇文章主要介紹了查看vue版本號(hào)以及vue/cli腳手架版本號(hào)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • 解決Vue2.0中使用less給元素添加背景圖片出現(xiàn)的問(wèn)題

    解決Vue2.0中使用less給元素添加背景圖片出現(xiàn)的問(wèn)題

    今天小編就為大家分享一篇解決Vue2.0中使用less給元素添加背景圖片出現(xiàn)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • Vue組件通信傳遞數(shù)據(jù)的三種方式

    Vue組件通信傳遞數(shù)據(jù)的三種方式

    這篇文章主要介紹了Vue組件通信傳遞數(shù)據(jù)的三種方式,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
    2023-04-04
  • Vue中父組件向子組件通信的方法

    Vue中父組件向子組件通信的方法

    可以使用props將父組件的數(shù)據(jù)傳給子組件。子組件在接受數(shù)據(jù)時(shí)要顯示聲明props。下面通過(guò)一個(gè)例子給大家介紹Vue中父組件向子組件通信的方法,需要的朋友參考下吧
    2017-07-07
  • 又一款MVVM組件 Vue基礎(chǔ)語(yǔ)法和常用指令(1)

    又一款MVVM組件 Vue基礎(chǔ)語(yǔ)法和常用指令(1)

    這篇文章主要為大家分享了一款MVVM組件,詳細(xì)介紹了Vue基礎(chǔ)語(yǔ)法和常用指令,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-11-11
  • ElementUI中el-tree節(jié)點(diǎn)的操作的實(shí)現(xiàn)

    ElementUI中el-tree節(jié)點(diǎn)的操作的實(shí)現(xiàn)

    這篇文章主要介紹了ElementUI中el-tree節(jié)點(diǎn)的操作的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • 如何防止Vue組件重復(fù)渲染的方法示例

    如何防止Vue組件重復(fù)渲染的方法示例

    在 Vue.js 中,組件的重復(fù)渲染是一個(gè)常見的問(wèn)題,可能會(huì)影響應(yīng)用的性能和用戶體驗(yàn),為了提升應(yīng)用的性能,開發(fā)者需要理解 Vue 的渲染機(jī)制,并應(yīng)用有效的方法來(lái)避免不必要的組件重渲染,本文將深入探討如何防止 Vue 組件重復(fù)渲染,并提供相關(guān)示例代碼,需要的朋友可以參考下
    2024-10-10
  • 解決element-ui的table表格控件表頭與內(nèi)容列不對(duì)齊問(wèn)題

    解決element-ui的table表格控件表頭與內(nèi)容列不對(duì)齊問(wèn)題

    這篇文章主要介紹了解決element-ui的table表格控件表頭與內(nèi)容列不對(duì)齊問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-07-07

最新評(píng)論