Target——搞懂登录流程和权限效验流程是怎么对接的,改哪里的代码
一开始看这个项目,我很懵逼,总的来说就是不同用户登录拥有不用的页面访问权限。
那么这个如何实现呢?用户有不同的路由表,为什么有角色?
这么想吧,如果说要批量修改用户的权限表不是很麻烦吗,如果用户与权限表之间有个角色作为中间衔接
对于刚刚的问题,只要修改角色对应的权限就好啦!
这个看是不是很清晰了
那么对于这个项目,它 的登录流程是什么呢?为什么要用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,也就没有登录权限可言了。
权限验证流程
-
根据以上的思路,我们再拿到token以后,我们要再走一遍登录流程,这里设计了token检查
-
如果在有拿到token的前提下,我们在用户登录之前,先用全局钩子
router.beforeEach
(重点理解这个router.beforeEach,放在和main.js同一路径下,而且这个函数不止这次登录的时候用到,在你发请求或者路由改变的时候都会执行)对用户信息进行拉取。
有些人会问为什么不把一些其它的用户信息也存一下?
-
通过 token 获取用户的 role ,动态根据用户的 role 算出其对应有权限的路由,再通过
router.addRoutes
动态挂载路由。但这些控制都只是页面级的,说白了前端再怎么做权限控制都不是绝对安全的,后端的权限验证是逃不掉的.(利用全局钩子)虽然前端拥有控制页面级的权限,但是还是需要在后端验证的前提下才可以控制。
-
路由的挂载是如何实现的?
- 创建vue实例的时候将vue-router挂载,但这个时候vue-router挂载一些登录或者不用权限的公用的页面。(白名单)
- 当用户登录后,获取用role,将role和路由表每个页面的需要的权限作比较,生成最终用户可访问的路由表。(遍历过滤判断roles字段是否有我们那个角色)
- 调用router.addRoutes(store.getters.addRouters)添加用户可访问的路由。
- 使用vuex管理路由表,根据vuex中可访问的路由渲染侧边栏组件。