【总结】有关vue使用微信扫码登录的一点小总结

上个月用vue做一个管理台，后期登录改成了微信扫码登录。要说vue也是遇到了不小的困难，毕竟以前连js用的都不是很利索。不过今天想先写之前困扰了我好几天的微信登录。

前期也参考了很多很多大神做的项目，但是由于本人才疏学浅所以有些地方免不了用一用自己的笨办法了，如果各位看官有什么更好的方法或者意见欢迎一起交流！！！

在这里比较多的参考了这篇【点我】。

啥都不说了，先上代码:

router.beforeEach((to, from, next) => {
if(window.location.href.indexOf('code')>=0){
//如果url中包含code,则保存到store中
let code = window.location.href.split("?")[1];
code = code.substring(5,code.indexOf('&'));
store.state.code = code;
}

if(to.path == '/login' && store.state.user) {
next('/')
return false
}else if((!sessionStorage.getItem("userid") || !store.state.user) && to.path != '/login'){
// 第一次进入项目
//store.state.beforeLoginUrl = to.fullPath; // 保存用户进入的url
next('/login')
return false
}else if(!store.state.user && to.path != '/login'){
// 之前有获取过授权
next('/login')
return false
}
next()
})

首先前边一段判断url中有没有code是因为，微信登录然后redirect之前的url中会包含获取token用的code,如果不把他保存下来页面就会一直跳转到login（感觉我用的这个方法比较笨）。

之后下边这一段就是判断vuex中有没有保存登录状态，sessionStorage中有没有保存userid了（userid是传给后端登录用的），如果都没有辣么也跳转到login。

然后继续码，login页面：

created() {
this.url = 'https://open.weixin.qq.com/connect/qrconnect?appid='+this.appid + '&redirect_uri='+ this.redirect_uri +'&response_type=code&scope=snsapi_login#wechat_redirect';
/*************************************************************/
if(sessionStorage.getItem("userid")){
this.login();
//如果sessionStorage中有userid,执行login
} else if(this.$store.state.code){
//如果只是有code
let _self = this;
//发请求，用code换token
this.$axios({
method: 'post',
url: this.baseURL + "/login",
data: {
code: this.$store.state.code
}
})
.then(function(response){
//token和登录状态先保存在sessionStorage里
sessionStorage.setItem("token",response.data.token);
sessionStorage.setItem("userid",response.data.userid);
})
.catch(function(error){
console.log(error);
})
}
else{
let self=this;
if (self && !self._isDestroyed) {
//如果失败了还是弹二维码
window.location = self.url;
}
}
}

没有先把token放在请求头里有一个考虑就是，如果用户有登录状态（vuex中有userid）登录时，header设置貌似失效要重新配置，而这个时候因为没有保存所以必须重新扫码登录，所以就把header设置放到了login中。

login函数:

login() {
let userid = {'userid': sessionStorage.getItem("userid")};
//token放到header里，一定要加Bearer空格
this.$axios.defaults.headers.common['Authorization'] = 'Bearer ' + sessionStorage.getItem("token");
console.log('axios headers Authorization set!');
let _self = this;
//登录请求
this.$axios({
method: 'get',
url: this.baseURL + "xxx",//向后端请求的地址
data: {
userid: sessionStorage.getItem("userid")
}
})
.then(response => {
if(response.status==200){
_self.$store.state.user = response;
_self.$router.push('/');
beforeLoginUrl+_self.$store.state.adminNav);

} else{
if(sessionStorage.getItem("userid")){
window.location = _self.url;
}
}
})
.catch(function(error){
console.log(error);
window.location = _self.url;
})