vue 微信授權(quán)登錄解決方案
背景
vue前后端分離開發(fā)微信授權(quán)
場(chǎng)景
app將商品分享到微信朋友圈或者分享給微信好友,用戶點(diǎn)擊頁(yè)面時(shí)進(jìn)行微信授權(quán)登陸,獲取用戶信息。
問題:沒有固定的h5應(yīng)用首頁(yè)。授權(quán)后重定向url帶參數(shù)并且很長(zhǎng)
本人愚鈍,開發(fā)過程中,嘗試過很多方法,踩坑不足以形容我的心情,可以說每一次都是一次跳井的體驗(yàn)啊。
1.一開始是前端請(qǐng)求微信連接,返回code,然后code作為再去請(qǐng)求后臺(tái)接口獲取token,后面看到別人的博客說這個(gè)方法不好,最好就是直接請(qǐng)求后臺(tái)接口,然后后臺(tái)返回url做跳轉(zhuǎn),所以就采用了最傳統(tǒng)的方法,后臺(tái)返回url,前臺(tái)跳轉(zhuǎn)。
async ReturnGetCodeUrl() { let { data } = await getWxAuth({}); if (data.status == 200) { window.location.href = data.url; // 返回的結(jié)果 // redirect_uri重定向的url是后臺(tái)的地址,后臺(tái)就是可拿到code,獲取token // https://open.weixin.qq.com/connect/oauth2/authorizeappid=xxxxxxxxxxxxxxxxxx&redirect_uri=***url***&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect } },
2.這個(gè)時(shí)候就出現(xiàn)一個(gè)問題,微信授權(quán)要跳跳跳,最終想回到第一次點(diǎn)進(jìn)來時(shí)候的鏈接就蛋疼了,從網(wǎng)上查了一下解決方法,將鏈接本身作為redirect_uri參數(shù),大概就是這個(gè)樣子
https://open.weixin.qq.com/connect/oauth2/authorizeappid=xxxxxxxxxxxxxxxxxx&redirect_uri=*www.admin?http://www.xxx.com/h5/product*&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect
然而我們的前臺(tái)鏈接是這個(gè)鬼樣子的,本身帶參數(shù),而且超長(zhǎng),what?微信可能不會(huì)接受我長(zhǎng)這么丑。/(ㄒoㄒ)/~~
http://www.xxx.com/h5/product?id=6RedfM5O4xeyl0AmOwmyipkHr8AQCv-hYXZVAIFTwDXOsWSKqgu3VaCmaKSerBnacvWuzO3Zwdf8y%2F2K2lvqkluV6Ane4LCAKyPU2tPAPj%2FMF6F6xkzp27GqqpNya7HbdEA34qGQJvHIA9tlIMkeEWid1112b8oZuP3FQBwU%2F%2FMaSrovzQP6LlzWamyPnv0vMizu8uh0ItpJOQUV1m%2FtemF3U9KuHo8rXCw%3D
最終放棄了這個(gè)方案
3.考慮如何重定向我的前臺(tái)地址,并且獲取token
接下來就是我現(xiàn)在用的方法,bug還有很多,先分享一下我的方法,后期優(yōu)化或有更好的方法再做修改
在main.js中路由全局鉤子判斷本地是不是有user_token,也就是微信授權(quán)后返回的token,如果沒有token,并且當(dāng)前的路由不是author(專門為了授權(quán)而生的頁(yè)面),那就保存當(dāng)前的url,比如www.xxx.com/h5/product?id=6RedfM5O4xeyl0AmOwm,然后進(jìn)入author。那如果本地有token,就是用戶之前授權(quán)拿到過token并且vuex里沒有用戶信息,那我就獲取用戶信息并保存在vuex中,這里遇到一個(gè)問題就是token會(huì)出現(xiàn)過期的情況,那我就刪除了本地的user_token,window.localStorage.removeItem("user_token");刷新頁(yè)面 router.go(0);這個(gè)時(shí)候就重新走了一遍如果沒有token的情況。
router.beforeEach((to, from, next) => { // 第一次進(jìn)入項(xiàng)目 let token = window.localStorage.getItem("user_token"); if (!token && to.path != "/author") { window.localStorage.setItem("beforeLoginUrl", to.fullPath); // 保存用戶進(jìn)入的url next("/author"); return false; } else if (token && !store.getters.userInfo) { //獲取用戶信息接口 store .dispatch("GetUserInfo", { user_token: token }) .catch(err => { window.localStorage.removeItem("user_token"); router.go(0); return false; }); } next(); });
下面就是進(jìn)入author.vue的邏輯,第一次進(jìn)入author, www.xxxx.com/h5/author,判斷鏈接有沒有token參數(shù),如果沒有就跳微信授權(quán),然后后臺(tái)會(huì)重定向回來并攜帶token,如: www.xxxx.com/h5/author?token=xxxxxxxxx&msg=200
<template> <div> 授權(quán)中。。。 </div> </template> <script> import { getWxAuth } from '@/service/getData' import { GetQueryString } from '@/utils/mixin'; export default { data() { return { token: '', }; }, computed: { }, created() { this.token = window.localStorage.getItem("user_token"); //判斷當(dāng)前的url有沒有token參數(shù),如果不存在那就跳轉(zhuǎn)到微信授權(quán)的url //就是前面說的ReturnGetCodeUrl方法 if (!GetQueryString("token")) { this.ReturnGetCodeUrl(); } else { //如果有token,如http://www.xxxx.com/h5/author?token=xxxxxxxxx&msg=200,這里的參數(shù)就是后臺(tái)重定向到前臺(tái)http://www.xxxx.com/h5/author,并攜帶的參數(shù)。這樣就可以拿到我們想要的token了 //判斷一下后臺(tái)返回的狀態(tài)碼msg,因?yàn)榭赡艹霈F(xiàn)微信拿不到token的情況 let msg = GetQueryString("msg") if (msg = 200) { this.token = GetQueryString("token"); //存儲(chǔ)token到本地 window.localStorage.setItem("user_token", this.token); //獲取beforeLoginUrl,我們的前端頁(yè)面 let url = window.localStorage.getItem("beforeLoginUrl"); //跳轉(zhuǎn) this.$router.push(url); //刪除本地beforeLoginUrl removeLocalStorage("beforeLoginUrl"); }else{ //msg不是200的情況,可能跳到404的錯(cuò)誤頁(yè)面 } } }, methods: { async ReturnGetCodeUrl() { let { data } = await getWxAuth({}); if (data.status == 200) { window.location.href = data.url; } }, }, watch: {}, components: {}, mounted: function () {} } </script> <style lang='scss' scoped> </style>
GetQueryString方法
mixin.js
export const GetQueryString = name => { var url = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var newUrl = window.location.search.substr(1).match(url); if (newUrl != null) { return unescape(newUrl[2]); } else { return false; } };
整個(gè)過程是可以實(shí)現(xiàn)授權(quán),但是覺得代碼寫得不好,以后的開發(fā)中希望能夠有更優(yōu)的方法。望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
改變vue請(qǐng)求過來的數(shù)據(jù)中的某一項(xiàng)值的方法(詳解)
下面小編就為大家分享一篇改變vue請(qǐng)求過來的數(shù)據(jù)中的某一項(xiàng)值的方法(詳解),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03Vue事件獲取事件對(duì)象之event.currentTarget詳解
這篇文章主要介紹了Vue事件獲取事件對(duì)象之event.currentTarget,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03又一款MVVM組件 Vue基礎(chǔ)語(yǔ)法和常用指令(1)
這篇文章主要為大家分享了一款MVVM組件,詳細(xì)介紹了Vue基礎(chǔ)語(yǔ)法和常用指令,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11vue-extend和vue-component注冊(cè)一個(gè)全局組件方式
這篇文章主要介紹了vue-extend和vue-component注冊(cè)一個(gè)全局組件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11vue項(xiàng)目使用axios封裝request請(qǐng)求的過程
這篇文章主要介紹了vue項(xiàng)目使用axios封裝request請(qǐng)求,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04