和我一起解刨基于Vue2.0+Vuex+element-ui的后台管理(一)之理清登录流程和权限校验

Target——搞懂登录流程和权限效验流程是怎么对接的,改哪里的代码

原作者代码仓库

官方文档

手摸手,带你用vue撸后台 系列一(基础篇)

手摸手,带你用vue撸后台 系列二(登录权限篇)

一开始看这个项目,我很懵逼,总的来说就是不同用户登录拥有不用的页面访问权限。

那么这个如何实现呢?用户有不同的路由表,为什么有角色?

这么想吧,如果说要批量修改用户的权限表不是很麻烦吗,如果用户与权限表之间有个角色作为中间衔接

在这里插入图片描述

对于刚刚的问题,只要修改角色对应的权限就好啦!

这个看是不是很清晰了

那么对于这个项目,它 的登录流程是什么呢?为什么要用JWT验证?这里的 权限 前端or后端 来控制?如果我篡改了cookie里面的令牌token,前端的请求还会通过吗?token的作用是什么?我每次路由的改变用什么监听?动态分配路由是怎么实现的?

如果你也在看这个项目,也和我一样困惑?那么看看下面我的分析是否解决你的问题!

登录流程

当前页面点击触发vuex里面user模块的login方法,利用封装好的axios发起请求,拿到令牌token,并存于vuex,和本地的token。
在这里插入图片描述

注意cookie只是存放令牌,利用JWT,在每次请求的时候,在请求头带上token,为了安全起见,后端不止这一次验证token。每次发起请求和路由变化都会进行监听,这里利用的是route.beforeEach进行全局守卫。

token的安全性是如何保证的?

ps:为了保证安全性,我司现在后台所有token有效期(Expires/Max-Age)都是Session,就是当浏览器关闭了就丢失了。重新打开游览器都需要重新登录验证,后端也会在每周固定一个时间点重新刷新token,让后台用户全部重新登录一次,确保后台用户不会因为电脑遗失或者其它原因被人随意使用账

反过来想,如果前端没有拿到后端的token,那前端也办法获取token,也就没有登录权限可言了。

权限验证流程

  1. 根据以上的思路,我们再拿到token以后,我们要再走一遍登录流程,这里设计了token检查

    在这里插入图片描述

  2. 如果在有拿到token的前提下,我们在用户登录之前,先用全局钩子router.beforeEach(重点理解这个router.beforeEach,放在和main.js同一路径下,而且这个函数不止这次登录的时候用到,在你发请求或者路由改变的时候都会执行)对用户信息进行拉取。

有些人会问为什么不把一些其它的用户信息也存一下?

在这里插入图片描述

  1. 通过 token 获取用户的 role ,动态根据用户的 role 算出其对应有权限的路由,再通过router.addRoutes动态挂载路由。但这些控制都只是页面级的,说白了前端再怎么做权限控制都不是绝对安全的,后端的权限验证是逃不掉的.(利用全局钩子)

    虽然前端拥有控制页面级的权限,但是还是需要在后端验证的前提下才可以控制。

  2. 路由的挂载是如何实现的?

    1. 创建vue实例的时候将vue-router挂载,但这个时候vue-router挂载一些登录或者不用权限的公用的页面。(白名单)
    2. 当用户登录后,获取用role,将role和路由表每个页面的需要的权限作比较,生成最终用户可访问的路由表。(遍历过滤判断roles字段是否有我们那个角色)
    3. 调用router.addRoutes(store.getters.addRouters)添加用户可访问的路由。
    4. 使用vuex管理路由表,根据vuex中可访问的路由渲染侧边栏组件。

在这里插入图片描述

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值