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=*admin?http://xxx.com/h5/product*&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect

然而我们的前台链接是这个鬼样子的，本身带参数，而且超长，what？微信可能不会接受我长这么丑。/(ㄒoㄒ)/~~

http://xxx.com/h5/product?id=6RedfM5O4xeyl0AmOwmyipkHr8AQCv-hYXZVAIFTwDXOsWSKqgu3VaCmaKSerBnacvWuzO3Zwdf8y%2F2K2lvqkluV6Ane4LCAKyPU2tPAPj%2FMF6F6xkzp27GqqpNya7HbdEA34qGQJvHIA9tlIMkeEWid1112b8oZuP3FQBwU%2F%2FMaSrovzQP6LlzWamyPnv0vMizu8uh0ItpJOQUV1m%2FtemF3U9KuHo8rXCw%3D

最终放弃了这个方案

3.考虑如何重定向我的前台地址，并且获取token

接下来就是我现在用的方法，bug还有很多，先分享一下我的方法，后期优化或有更好的方法再做修改

在main.js中路由全局钩子判断本地是不是有user_token，也就是微信授权后返回的token，如果没有token，并且当前的路由不是author（专门为了授权而生的页面），那就保存当前的url，比如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， xxxx.com/h5/author，判断链接有没有token参数，如果没有就跳微信授权，然后后台会重定向回来并携带token，如： xxxx.com/h5/author?token=xxxxxxxxx&msg=200

授权中。。。

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;

}

};

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。