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

雨点打透心脏的1/2处 2022-10-21 14:51 5阅读 0赞

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

[原作者代码仓库][Link 1]

[官方文档][Link 2]

[手摸手，带你用vue撸后台 系列一（基础篇）][vue_]

[手摸手，带你用vue撸后台 系列二(登录权限篇)][vue_ 1]

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70]

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

这个看是不是很清晰了

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

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

## 登录流程 ##

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

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

**token的安全性是如何保证的？**

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

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

## 权限验证流程 ##

1.  根据以上的思路，我们再拿到token以后，我们要再走一遍登录流程，这里设计了token检查
    
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 2]
2.  如果在有拿到token的前提下，我们在用户登录之前，先用全局钩子`router.beforeEach`（重点理解这个router.beforeEach，放在和main.js同一路径下，而且这个函数不止这次登录的时候用到，在你发请求或者路由改变的时候都会执行）对用户信息进行拉取。

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 3]

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中可访问的路由渲染侧边栏组件。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 4]

[Link 1]: https://github.com/PanJiaChen/vue-element-admin
[Link 2]: https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/essentials/layout.html#layout
[vue_]: https://juejin.cn/post/6844903476661583880
[vue_ 1]: https://juejin.cn/post/6844903478880370701
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70]: /images/20221021/aa5e8eabd7ca4c73956fa13bb24e0d1a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 1]: /images/20221021/fa2ffd5663cc4c92acdedef338e671d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 2]: /images/20221021/1fdcf898f1f247f9996235acf7354cae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 3]: /images/20221021/ebb9befe8ea44f5c87d0189f76aaf648.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 4]: /images/20221021/aa0b78edefde40adaf322039392264dc.png