登录权限( 四 )


两步验证
文章一开始也说了,后台的安全性是很重要的,简简单单的一个账号+密码的方式是很难保证安全性的 。所以我司的后台项目都是用了两步验证的方式,之前我们也尝试过使用基于 - 或者这样的方式但难度和操作成本都比较大 。后来还是准备借助腾讯爸爸,这年代谁不用微信 。。。安全性腾讯爸爸也帮我做好了保障 。
楼主建议两步验证要支持多个渠道不要只微信或者QQ,前段时间QQ第三方登录就出了bug,官方两三天才修好的,害我背了锅/(ㄒoㄒ)/~~。
这里的两部验证有点名不副实,其实就是账号密码验证过之后还需要一个绑定的第三方平台登录验证而已 。
写起来也很简单,在原有登录得逻辑上改造一下就好 。
this.$store.dispatch('LoginByEmail', this.loginForm).then(() => {//this.$router.push({ path: '/' });//不重定向到首页this.showDialog = true //弹出选择第三方平台的dialog}).catch(err => {this.$message.error(err); //登录失败提示错误});
登录成功之后不直接跳到首页而是让用户两步登录,选择登录得平台 。
接下来就是所有第三方登录一样的地方通过 .0 授权 。这个各大平台大同小异,大家自行查阅文档,不展开了,就说一个微信授权比较坑的地方 。注意你连参数的顺序都不能换,不然会验证不通过 。具体代码,同时我也封装了方法大家自行看吧 。
当第三方授权成功之后都会跳到一个你之前有一个传入——uri的页面
如微信还必须是你授权账号的一级域名 。所以你授权的域名是vue-element-admin.com,你就必须重定向到vue-element-admin.com/xxx/下面,所以你需要写一个重定向的服务,如vue-element-admin.com/auth/redirect?a.com 跳到该页面时会再次重定向给a.com
所以我们后台也需要开一个页面:代码 。他的作用是第三方登录成功之后会默认跳到授权的页面,授权的页面会再次重定向回我们的后台,由于是spa,改变路由的体验不好,我们通过...href的方式改变hash,在login.js里面再监听hash的变化 。当hash变化时,获取之前第三方登录成功返回的code与第一步账号密码登录之后返回的uid一同发送给服务端验证是否正确,如果正确,这时候就是真正的登录成功 。
到这里涉及登录权限的东西也差不多讲完了,这里楼主只是给了大家一个实现的思路(都是楼主不断摸索的血泪史),每个公司实现的方案都有些出入,请谨慎选择适合自己业务形态的解决方案 。如果有什么想法或者建议欢迎去本项目下留言,一同讨论 。