這次帶給大家怎樣操作vue微信授權登陸,操作vue微信授權登陸的注意事項有哪些,下面就是實戰案例,一起來看一下。
背景
vue前後端分離開發微信授權
#場景
app將商品分享到微信朋友圈或分享給微信好友,使用者點擊頁面時進行微信授權登陸,取得使用者資訊。
問題:沒有固定的h5應用程式首頁。授權後重定向url帶參數並且很長
本人愚鈍,開發過程中,嘗試過很多方法,踩坑不足以形容我的心情,可以說每一次都是一次跳井的體驗啊。
1.一開始是前端請求微信連接,返回code,然後code作為再去請求後台接口獲取token,後面看到別人的博客說這個方法不好,最好就是直接請求後台接口,然後後台回到url做跳轉,所以就採用了最傳統的方法,後台回到url,前台跳轉。
async ReturnGetCodeUrl() { let { data } = await getWxAuth({}); if (data.status == 200) { window.location.href = data.url; // 返回的结果 // redirect_uri重定向的url是后台的地址,后台就是可拿到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.這時候就出現一個問題,微信授權要跳跳跳,最終想回到第一次點進來時候的鏈接就蛋疼了,從網上查了一下解決方法,將鏈接本身作為redirect_uri參數,大概就是這個樣子
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
然而我們的前台連結是這個鬼樣子的,本身帶參數,而且超長,what?微信可能不會接受我長這麼醜。 /(ㄒoㄒ)/~~
最終放棄了這個方案3.考慮如何重定向我的前台地址,並且獲取token接下來就是我現在用的方法,bug還有很多,先分享我的方法,後期優化或有更好的方法再做修改http://www.xxx.com/h5/product?id=6RedfM5O4xeyl0AmOwmyipkHr8AQCv- hYXZVAIFTwDXOsWSKqgu3VaCmaKSerBnavWuzOYXZVAIFTw1OsWSKqgu3VaCmaKSerBnaAKP232F445F4F45F45F45F45F4F45F45F4F45F45F4F45F45F45F45F45Fp zp27GqqpNya7HbdEA34qGQJvHIA9tlIMkeEWid1112b8oZuP3FQBwU//MaSrovzQP6LlzWamyPnv0vMizu8uh0ItpJOQUV1m/temF3UlzWamyPnv0vMizu8uh0ItpJOQUV1m/temF3UlzWamyPnv0vMizu8uh0ItpJOQUV1m/temF3U
在main.js中
路由全域鉤子判斷本地是不是有user_token,也就是微信授權後回傳的token,如果沒有token,而且目前的路由不是author(專門為了授權而生的頁面),那就保存當前的url,例如www.xxx.com/h5/product?id=6RedfM5O4xeyl0AmOwm,然後進入author。那如果本地有token,就是用戶之前授權拿到過token並且vuex裡沒有用戶信息,那我就獲取用戶信息並保存在vuex中,這裡遇到一個問題就是token會出現過期的情況,那我就刪除了本地的user_token,window.localStorage.removeItem("user_token");刷新頁面router.go(0);這時候就重新走了一遍如果沒有token的情況。
router.beforeEach((to, from, next) => { // 第一次进入项目 let token = window.localStorage.getItem("user_token"); if (!token && to.path != "/author") { window.localStorage.setItem("beforeLoginUrl", to.fullPath); // 保存用户进入的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(); });下面就是進入author.vue的邏輯,第一次進入author, www.xxxx.com/h5/author,判斷連結有沒有token參數,如果沒有就跳微信授權,然後後台會重定向回來並攜帶token,如: www.xxxx.com/h5/author?token=xxxxxxxxx&msg=200
<template> <p> 授权中。。。 </p> </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"); //判断当前的url有没有token参数,如果不存在那就跳转到微信授权的url //就是前面说的ReturnGetCodeUrl方法 if (!GetQueryString("token")) { this.ReturnGetCodeUrl(); } else { //如果有token,如http://www.xxxx.com/h5/author?token=xxxxxxxxx&msg=200,这里的参数就是后台重定向到前台http://www.xxxx.com/h5/author,并携带的参数。这样就可以拿到我们想要的token了 //判断一下后台返回的状态码msg,因为可能出现微信拿不到token的情况 let msg = GetQueryString("msg") if (msg = 200) { this.token = GetQueryString("token"); //存储token到本地 window.localStorage.setItem("user_token", this.token); //获取beforeLoginUrl,我们的前端页面 let url = window.localStorage.getItem("beforeLoginUrl"); //跳转 this.$router.push(url); //删除本地beforeLoginUrl removeLocalStorage("beforeLoginUrl"); }else{ //msg不是200的情况,可能跳到404的错误页面 } } }, 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; } };相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章! 推薦閱讀:
以上是怎樣操作vue微信授權登陸的詳細內容。更多資訊請關注PHP中文網其他相關文章!