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

1、前端权限控制思路

1.1.菜单的控制

在登录请求中，会得到权限数据，当然，这个需要后端返回数据的支持前端根据权限数据，展示对应的菜单.点击菜单才能查看相关的界面.(不同用户的菜单列表不一样)

1.2.界面的控制

如果用户没有登录，手动在地址栏敲入管理界面的地址,则需要跳转到登录界面
如果用户已经登录可是手动敲入非权限内的地址,则需要跳转404界面

1.3.按钮的控制

在某个菜单的界面中,还得根据权限数据,展示出可进行操作的按钮,比如删除,修改,增加

1.4.请求和响应的控制

如果用户通过非常规操作，比如通过浏览器调试工具将某些禁用的按钮变成启用状态，此时发的请求，也应该被前端所拦截

实践

（1）菜单的控制

一般来说,菜单的控制都会让后端在登录请求后存放在res.rights中,权限数组中的authName和children中的authName对应的就是用户所拥有的权限菜单
在用户进行登录的时候,将权限列表保存到vuex中，在vuex中定义一个mutation来对rightsList进行保存
在create生命周期中将获取的rightsList存放到data中的menulist中给菜单组件渲染(假如后端返回的数据不能直接给rightsList展示,可以在这里对返回的数据处理成方便渲染的数据)
问题：页面一刷新vuex中的数据会被清空，这时我们又没有到登录界面去登录所以没有将数据存放在vuex中。会造成一刷新页面菜单栏为空的现象
解决方法: 登录时将权限内容保存到sessionStorage中(sessionStorage中存放的是字符串)，在state中通过sessionStorage.getItem去获取rightsList中的内容没有就给空数组

（2）界面的控制

在登录后可以将token保存起来
利用路由导航守卫对有无登录做出对应页面跳转
重点:动态路由的渲染

将路由规则提取成变量
把路由规则的变量做映射，对应后端返回的路由path
使用router.options.routes可以获取当前的路由规则
使用router.addRoutes()可以更新修改后的路由规则

（3）按钮的控制

用户不具备权限的按钮就隐藏或者禁用，而在这块中，可以把该逻辑放到自定义指令中 permission.js

通过Vue.directive创建自定义指令
inserted()是元素插入dom节点时触发，其中el是指当前的元素,binding是获取自定义指令中的数据内容
在渲染动态路由时就有将路由对应的权限保存在meta中。此时再判断自定义指令中是否存在当前路由的meta中的权限,如果没有那么移除权限,如果有并且自定义指令中有disable那么可以让元素不可选中。

（4）请求和响应的控制

请求控制
除了登录请求都得要带上token，在封装请求时(axios)，做统一处理。