后台系统的权限控制与管理

以下内容源于对该视频的学习

前端面试官必问系列-后台系统的权限控制与管理【完结】

---

目录

前端权限控制思路

vue的权限控制与实现

菜单的控制

界面的控制 

按钮的控制

请求和响应的控制

总结 

---

前端权限控制思路

角色不同，权限不同

控制思路：

1.菜单的控制--根据权限数据展示对应的菜单栏

2.界面的控制--用户没登录，手动输入地址时候应跳转到登录界面；用户登录后，手动敲入非权限地址，应该跳转到404

3.按钮的控制--根据权限数据展示可以操作的按钮

4.请求响应的控制--用户通过非常规手段，比如调试浏览器把禁用按钮调为可用按钮发送的请求也应该被拦截

vue的权限控制与实现

菜单的控制

所需数据rights由服务器返回

1.用vuex将登录页面得到的数据在主页侧边栏进行渲染

将数据保存在vuex中（由于vuex数据是响应式的，刷新会丢失数据，所以需要将数据通过JSON字符串存入sessionStorage中，重新加载的时候，从sessionStorage拿取数据）

 

 在主页中数据映射，就可以像普通数据一样使用了

在created阶段初始化菜单栏的数据

为了方便调试，可以将用户名也同理存储起来展示

2.退出登录按钮的操作 

点击退出按钮，需要清空sessionStorage和vuex中的数据，清空sessionStorage直接用clear方法即可，清除vuex的数据，其实sessionStorage清空了，在刷新，vuex自然就没有数据了，所以这里只需要刷新页面即可--window.location.reload()方法

展示完整的菜单栏

切换用户登录，显示部分菜单

界面的控制 

通过登录页面，登录成功后跳转到平台管理界面，但是用户直接输入平台管理地址，也可以跳过登录步骤的，所以应该在某个时机判断用户是否登录。

1.如何判断登录？--利用token ，将token存储在sessionStorage中

2.什么时机判断登录？--利用路由导航守卫

防止用户跳过登录界面：利用前置路由导航守卫

如果用户需要跳转到登录界面，不需要拦截，访问其他界面的情况下，需要判断是否登录，如果token不存在，代表没有登录。

防止用户登录后跳转到非权限页面：利用动态路由解决

先思考问题：路由导航守卫可以在每次路由地址发生变化的时候，从vuex中取出rightList进行判断用户是否有权限，但是这个用户如果不具备权限，那这个路由是否应该存在呢？-----这里就不能用路由守卫了，因为对于没有权限的用户，这个路由其实不应该存在。

动态路由

根据用户的权限来动态的添加路由

 在router.js中定义一个动态路由添加的方法，遍历2级权限，添加

item代表的是一级权限，需要遍历item.children，这时才是二级权限

 写一个映射关系

 在login界面按需引入，应用

动态路由是登陆成功后才会调用的，刷新的时候不会调动用，可以在created阶段加上

 按钮的控制

使用自定义指令的方式--控制按钮删除或者禁用 

通过router.currentRoute.meta可以获得当前路由自己设置的权限，再进行权限数据对比

 请求和响应的控制

请求控制

对axios进行请求拦截器的配置

除了登录请求，都需要带上token

如果发出了非权限内的请求，也应该进行拦截

响应控制

总结