vue使用微信扫码登录的一点小总结

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

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

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

啥都不说了，先上代码:

[javascript]  view plain  copy

1. router.beforeEach((to, from, next) => {  
2.   if(window.location.href.indexOf('code')>=0){  
3.     //如果url中包含code,则保存到store中  
4.     let code = window.location.href.split("?")[1];  
5.     code = code.substring(5,code.indexOf('&'));  
6.     store.state.code = code;  
7.   }  
8.   
9.   if(to.path == '/login' && store.state.user) {  
10.     next('/')  
11.     return false  
12.   }else if((!sessionStorage.getItem("userid") || !store.state.user) && to.path != '/login'){  
13.     // 第一次进入项目  
14.     //store.state.beforeLoginUrl = to.fullPath; // 保存用户进入的url  
15.     next('/login')  
16.     return false  
17.   }else if(!store.state.user && to.path != '/login'){  
18.     // 之前有获取过授权  
19.     next('/login')  
20.     return false  
21.   }  
22.   next()  
23. })  

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

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

然后继续码，login页面：

[javascript]  view plain  copy

1. created() {  
2.       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';  
3.       /*************************************************************/  
4.       if(sessionStorage.getItem("userid")){  
5.         this.login();  
6.         //如果sessionStorage中有userid,执行login  
7.       } else if(this.$store.state.code){  
8.         //如果只是有code  
9.        let _self = this;  
10.         //发请求，用code换token  
11.         this.$axios({  
12.           method: 'post',  
13.           url: this.baseURL + "/login",  
14.           data: {  
15.             code: this.$store.state.code  
16.           }  
17.         })  
18.         .then(function(response){  
19.         //token和登录状态先保存在sessionStorage里  
20.           sessionStorage.setItem("token",response.data.token);  
21.           sessionStorage.setItem("userid",response.data.userid);  
22.       })  
23.       .catch(function(error){  
24.         console.log(error);  
25.       })  
26.       }  
27.       else{  
28.         let self=this;  
29.         if (self && !self._isDestroyed) {  
30.           //如果失败了还是弹二维码  
31.           window.location = self.url;  
32.         }  
33.       }  
34.     }  

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

login函数:

[javascript]  view plain  copy

1. login() {  
2.         let userid = {'userid': sessionStorage.getItem("userid")};  
3.         //token放到header里，一定要加Bearer空格  
4.         this.$axios.defaults.headers.common['Authorization'] = 'Bearer ' + sessionStorage.getItem("token");  
5.         console.log('axios headers Authorization set!');  
6.         let _self = this;  
7.         //登录请求  
8.         this.$axios({  
9.           method: 'get',  
10.           url: this.baseURL + "xxx",//向后端请求的地址  
11.           data: {  
12.             userid: sessionStorage.getItem("userid")  
13.           }  
14.         })  
15.         .then(response => {  
16.           if(response.status==200){  
17.             _self.$store.state.user = response;  
18.             _self.$router.push('/');  
19.             beforeLoginUrl+_self.$store.state.adminNav);  
20.   
21.           } else{  
22.             if(sessionStorage.getItem("userid")){  
23.               window.location = _self.url;  
24.             }  
25.           }  
26.         })  
27.         .catch(function(error){  
28.           console.log(error);  
29.           window.location = _self.url;  
30.         })