背景
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"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"htmlcode">
<template> <div> 授权中。。。 </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"); //判断当前的url有没有token参数,如果不存在那就跳转到微信授权的url //就是前面说的ReturnGetCodeUrl方法 if (!GetQueryString("token")) { this.ReturnGetCodeUrl(); } else { //如果有token,如http://www.xxxx.com/h5/author"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; } };整个过程是可以实现授权,但是觉得代码写得不好,以后的开发中希望能够有更优的方法。望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 银霞.2002-《国语巨星专辑VOL.3》2CD台湾版[WAV+CUE]
- 金池刘罡《昨日情歌HQ》头版限量编号[低速原抓WAV+CUE]
- 段奥娟.2024-23·岁碎念【白米范】【FLAC分轨】
- 顺子.2001-昨日·唯一·更多·顺子自选辑【魔岩】【WAV+CUE】
- 无印良品.1999-私藏三首·原创相对论(EP)【滚石】【WAV+CUE】
- Merryland《Merryland》[FLAC/分轨][170.22MB]
- 庄锭欣 ELKIE《没有你的未来》[320K/MP3][15.78MB]
- 庄锭欣 ELKIE《没有你的未来》[FLAC/分轨][36MB]
- TchaikovskySwanLake,Op.20柴可夫斯基天鹅湖(2013)SACD[Hi-Res]
- 24bit达人艺典《琴歌终极版》整轨WAV+CUE
- 黑鸭子.2005-《发烧DSD》柏菲[WAV分轨]
- 群星.1990-电影看板·人间道【宝丽金】【WAV+CUE】
- 周殷廷.2024-TO.WHOM.IT.MAY.CONCERN【环球】【FLAC分轨】
- 草蜢.1997-三人世界精选17首【宝丽金】【WAV+CUE】
- 【古琴音乐】管平湖《广陵散》2004[FLAC+CUE]