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.         })  
已标记关键词 清除标记
相关推荐
课程概述: 本课程是一个小型的vue周边技术+以php为基础的+微信接口开发的小型项目。本项目以微信关注公众号实现 网站自动登陆这一功能为载体,将会讲解如下主要核心知识点: 前端你将学习到: 一、vue-cli4进行前端项目的创建 二、如何使用vuex进行登陆信息的管理与同步 三、如何使用axios进行接口请求的封装与拦截 四、在脚手架里使用Element-UI 五、学习组件化编程的思想 六、如何解决接口前后端分离引起的跨域问题以及在跨域下使用cookie凭证进行会话维护 后端你讲学习到: 一、如何申请微信公众号测试账号,如何进行相关参数的配置,如何进行微信相关接口的开发 二、如何使用微信接口开发,如获取临时二维,获取用户基础信息,监听公众号关注以及描事件 三、如何使用redis对数据进行缓存 四、如何使用php原生代进行接口的开发 五、如何使用laralvel 7.x 框架进行接口的开发 六、学习到laravel 中核心概念的使用方法,如什么是依赖注入,如何使用服务容器解决依赖注入、服务提供者、中间件的使用,如何处理请求数据,如何进行用户认证,以及如何使用Eloquent ORM进行数据库操作 七、开发过程中遇到的问题,如何进行排查 八、git远端仓库的建立与配置,如何在配置多仓库下的公钥,服务器端部署公钥的配置,如何进行代部署,本地与服务器代的开发实时同步 九、如何使用composer帮助我们进行第三方依赖包的安装 本课程的设计思路随笔: 从业务层面上来讲,关注公众号,实现网站端自动登陆是一个非常实用的功能,可以为微信公众号引流。 技术层面上来说,使用前后端分离进行制作,可以将前端以及后端的知识都涵盖到。对于前端的路由,信息维护,脚手架的搭建,ui组件的使用,接口的请求与封装都能够讲解到。 对于后端,本课程对php原生代以及工作中使用频率比较高的同时也很优雅的laravel框架都会进行讲解,分别予以代的实现。让同学们能够看到原生开发与框架开发的区别,原生开发使得基础比较弱的同学能够慢慢上手,也知道此功能实现的核心要点,在进行原生代开发后,再进行框架开发,会有个循序渐进的过程,同时在框架里面我们会降到主流框架都会用到的一些核心思想,比如依赖注入,服务容器,中间件等等,同时对于想学习laravel框架的同学,学习过这个案例后,再去看文档就知道该如何去看,如何去学了。 对于整个代的管理与部署,我们也会引入git仓库进行项目代管理,如何在服务器进行网站环境的搭建与代部署等等实用技巧。 相信本课程会给大家带来十足的收获,大家加油。
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页