Vue微信項(xiàng)目按需授權(quán)登錄策略實(shí)踐思路詳解
項(xiàng)目采用Vue作為開發(fā)框架,用戶瀏覽頁(yè)面時(shí)有兩種情況:
- 一種是需要用戶先登錄之后才能繼續(xù)瀏覽;
- 另一種是用戶無(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)文章
查看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)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09又一款MVVM組件 Vue基礎(chǔ)語(yǔ)法和常用指令(1)
這篇文章主要為大家分享了一款MVVM組件,詳細(xì)介紹了Vue基礎(chǔ)語(yǔ)法和常用指令,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11ElementUI中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解決element-ui的table表格控件表頭與內(nèi)容列不對(duì)齊問(wèn)題
這篇文章主要介紹了解決element-ui的table表格控件表頭與內(nèi)容列不對(duì)齊問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07