这次给大家带来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ㄒ)/~~
http://www.xxx.com/h5/product?id=6redfm5o4xeyl0amowmyipkhr8aqcv-hyxzvaiftwdxoswskqgu3vacmakserbnacvwuzo3zwdf8y%2f2k2lvqkluv6ane4lcakypu2tpapj%2fmf6f6xkzp27gqqpnya7hbdea34qgqjvhia9tlimkeewid1112b8ozup3fqbwu%2f%2fmasrovzqp6llzwamypnv0vmizu8uh0itpjoquv1m%2ftemf3u9kuho8rxcw%3d
最终放弃了这个方案
3.考虑如何重定向我的前台地址，并且获取token
接下来就是我现在用的方法，bug还有很多，先分享一下我的方法，后期优化或有更好的方法再做修改
在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; }};
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
jquery做出合并/追加数组除重功能
vue-cli组件导入使用步骤详解
以上就是vue怎么获得微信授权并登陆的详细内容。