如何解決Vue微信授權(quán)登錄前后端分離的問(wèn)題

微信授權(quán)登錄是一個(gè)非常常見(jiàn)的場(chǎng)景,利用微信授權(quán)登錄,我們可以很容易獲取用戶的一些信息,通過(guò)用戶對(duì)公眾號(hào)的唯一openid從而建立數(shù)據(jù)庫(kù)綁定用戶身份.

微信授權(quán)登錄的機(jī)制這里不做詳述,微信官方文檔已有詳述,簡(jiǎn)述就是通過(guò)跳轉(zhuǎn)微信授權(quán)的頁(yè)面,用戶點(diǎn)擊確認(rèn)后,微信會(huì)跳到回調(diào)頁(yè)面,此時(shí)回調(diào)頁(yè)面url上會(huì)攜帶code參數(shù),通過(guò)code參數(shù),后端可以拿code換取擁護(hù)openid,或者用戶信息

在vue項(xiàng)目中,通常是一個(gè)SPA應(yīng)用,即所有的頁(yè)面都是同一個(gè)html,通常現(xiàn)在開(kāi)發(fā)也是前后端徹底分離的,vue打包后生成的純靜態(tài)文件,甚至可以不經(jīng)過(guò)服務(wù)器,所以通過(guò)后端弄跳轉(zhuǎn)之類的都不太優(yōu)雅,本文即介紹此類場(chǎng)景的微信授權(quán)登錄

對(duì)于一個(gè)vue的SPA應(yīng)用,我們通?？赡苡泻芏囗?yè)面,在微信公眾號(hào)上我們可能配置多個(gè)菜單,多個(gè)菜單對(duì)應(yīng)vue的路由頁(yè)面,但是可能并不是每個(gè)頁(yè)面都需要用戶授權(quán)才能進(jìn)入,有些頁(yè)面用戶不登錄也需要可以預(yù)覽,此時(shí)我們可以通過(guò)vue router來(lái)實(shí)現(xiàn)前端路由攔截

 router.beforeEach(async (to, from, next) => {
 if (to.matched.some(recode => recode.meta.noAuth)) {
 next()
 } else {
 // store已存在用戶信息直接進(jìn)入頁(yè)面
 if (store.state.userInfo.nickname) {
 next()
 return
 }
 const code = getUrl(window.location.href).code // 截取url上的code ,可能沒(méi)有,則返回''空字符串
 let res = await api.post('/imsl/user/user-auth', [code]) // 獲取用戶信息,后端可首先通過(guò)cookie,session等判斷,沒(méi)有信息則通過(guò)code獲取
 console.log(res)
 // 返回用戶信息
 if (res.code === 200 && res.data.is_auth) {
 store.commit('setUserInfo', res.data)
 next()
 } else {
 // 此狀態(tài)根據(jù)業(yè)務(wù)需求 可能不存在
 if (res.code === 201) {
 const openid = res.data.openid
 console.log(openid)
 store.commit('setOpenid', openid)
 localStorage.setItem('openid', openid)
 next('/enlist-info')
 }
 // 上面的獲取用戶信息接口,如果cookie,session拿不到用戶信息,且傳遞的code為空,則跳轉(zhuǎn)到微信授權(quán)頁(yè)面
 if (res.code === 202) {
 console.log(window.location.origin)
 console.log(to.fullPath)
 // 這個(gè)redirectUrl用 當(dāng)前頁(yè)路徑或者tof.fullPath(將要進(jìn)入的路徑)
 let redirectUrl = window.location.href
 redirectUrl = encodeURIComponent(redirectUrl)
 console.log(redirectUrl)
 const appid='wxdff0642c2120ea39'
 window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
 }
 }
 }
})

上述代碼基本闡述了一個(gè)授權(quán)的過(guò)程,首先,我們?cè)谂渲胿ue路由的時(shí)候,設(shè)置此路由是否需要登錄即給router的meta加一個(gè)noAuth:true的屬性,這個(gè)是處理不需要登錄的頁(yè)面,通過(guò)router.beforeEach進(jìn)行判斷,如果是不需要登錄的頁(yè)面:noAuth,則直接next()讓其進(jìn)入相應(yīng)頁(yè)面.對(duì)于需要登錄的頁(yè)面,則讓后端配合,此時(shí),后端寫(xiě)一個(gè)獲取用戶信息的接口,前端則直接調(diào)用獲取用戶信息的接口,當(dāng)然,不需要每個(gè)頁(yè)面都調(diào)用,獲取一次之后可以將用戶信息存入vuex中,所以通過(guò)判斷vuex里面有沒(méi)有用戶信息,如果已存在用戶信息,則進(jìn)入頁(yè)面.沒(méi)有用戶信息那就調(diào)用后端獲取用戶信息的接口,說(shuō)到這里,終于回到此文主題了,用戶信息是通過(guò)微信授權(quán)登錄拿到的,此時(shí)后端如何拿到用戶信息呢?這里,可以跟后端商議好,用戶綁定身份后,后端則可以通過(guò)設(shè)置cookie,token之類的保存這個(gè)用戶登錄狀態(tài),如果有相關(guān)狀態(tài),那么后端則可以直接返回用戶信息. 如果是首次進(jìn)入,或者cookie,token之類的已失效,那么此時(shí)則會(huì)調(diào)用微信授權(quán)登錄了,如上述代碼所述,分為三種情況,

1. 通過(guò)cookie,token等,后端直接拿到了用戶信息,此時(shí)則拿到用戶信息直接進(jìn)入頁(yè)面,同時(shí)把用戶信息存入vuex中

2. 沒(méi)有用戶信息的情況,此時(shí)也沒(méi)有cookie,token,那就需要重新調(diào)用微信授權(quán)登錄了,上面給出的兩種返回碼code=201,code=202的情況,當(dāng)code=2是則由前端直接跳轉(zhuǎn)到微信授權(quán)頁(yè)面,而redirectUri則為將要進(jìn)入的頁(yè)面,此時(shí)會(huì)發(fā)生什么呢?會(huì)跳到微信授權(quán)頁(yè)面,用戶點(diǎn)擊之后又回到了這個(gè)頁(yè)面,不同的是此時(shí)url上面已經(jīng)攜帶了code,前端通過(guò)字符串截取拿到code,發(fā)送給后端,后端即可通過(guò)code換取openid以及用戶信息了.

總結(jié):

1. 項(xiàng)目采用前后端完全分離方式,即打包后給的純靜態(tài)文件放在服務(wù)器,訪問(wèn)index.html

2. 后端不在接口處攔截,不需要后端跳轉(zhuǎn)微信授權(quán)登錄頁(yè)面,由前端路由來(lái)攔截跳轉(zhuǎn),實(shí)現(xiàn)方法如3.

3. 前端在需要用戶身份才能進(jìn)入的頁(yè)面通過(guò)vue-router的 router.beforeEach鉤子函數(shù)攔截,此時(shí)調(diào)用獲取用戶信息接口,后端首先通過(guò)獲取cookie,token等判斷用戶,無(wú)相關(guān)信息返回201或202,當(dāng)返回202的時(shí)候,前端跳轉(zhuǎn)到微信授權(quán)頁(yè),redirecturi即為要進(jìn)入的頁(yè)面的url,跳轉(zhuǎn)授權(quán)后微信會(huì)在url上面攜帶code回到當(dāng)前頁(yè),此時(shí)前端截取url上的code傳給后端,后端通過(guò)code在后端處理拿到用戶信息,openid等實(shí)現(xiàn)了授權(quán)登錄　　

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com