vue 微信授权解决方案
场景app将商品分享到微信朋友圈或者分享给微信好友,用户点击页面时进行微信授权登陆,获取用户信息。问题:没有固定的h5应用首页。授权后重定向url带参数并且很长本人愚钝,开发过程中,尝试过很多方法,踩坑不足以形容我的心情,可以说每一次都是一次跳井的体验啊。1.一开始是前端请求微信连接,返回code,然后code作为再去请求后台接口获取token,后面看到别人的博客说这个方法不好,最好就是直接请求后
场景
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>
<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?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;
}
};
整个过程是可以实现授权,但是觉得代码写得不好,以后的开发中希望能够有更优的方法。希望能和大家交流学习。
更多推荐
所有评论(0)