1. 权限的相关概念
状态保持:在不发送用户账户名和密码的情况下,后端依然知道是哪个用户在发送请求,一般情况下有三种方式来实现状态保持,cookie,session和token,前后端分离的架构中,token用的比较多
token是一堆字符串,用来标识用户的唯一性,为了让后端知道是哪个用户在请求数据,因此在请求头当中,前端一般要将token传给后端
2. 前端权限的意义
没必要的按钮不显示
没必要的请求不发送
没必要的页面不显示
3. 前端权限控制思路
- 菜单的控制
登录之后拿到数据,有两个关键的字段,token和rights权限数据
刷新页面菜单栏消失
退出登录既要清空sessionStorage中的数据,又要清空vuex中的数据
清空vuex的数据有两种方法,一种是用action,mutation清空,一种是跳转界面后刷新界面清空数据,两种方法都可以,建议用第一种方法
方法一:
方法二:
- 界面的控制
路由导航守卫,防止用户跳过登录界面
- 动态路由
根据用户所拥有的的权限数据动态添加路由,有些非用户权限的界面直接不要加载路由,防止用户自己手动输入路径访问非权限内的界面
动态添加路由的方法有两个调用场景,一个场景是登录成功后,一个场景是登录成功以后刷新页面时,router.js中的路由会重置为动态添加路由前的路由,这时菜单会消失,因为你刷新的时候已经登录过了,login方法已经调用过了,动态路由也加载过了,如果这时再刷新,不会再调用login方法中动态路由的方法了,所以为了防止刷新页面菜单消失,要在App.vue组件的created方法中再调用动态添加路由的方法,这样刷新界面的时候,会重新调用App.vue组件中的动态添加路由方法,这样权限路由不会因为刷新而不显示
路由要写成这种模式export default 暴露出去才可以打印出具体的路由信息
- 按钮的控制
自定义指令,permission.js文件一定要在main.js文件中引入,这样组件才可以使用
insterted钩子函数,会在指令(元素)被插入到dom节点的时候被调用,函数接收两个参数,一个是el,当前使用这个指令的dom元素,第二个参数binding,指这个指令后面所绑定的数据,可以打印一下el和binding,看看内容
如何拿到当前用户在该路由或者页面下的按钮权限?
添加动态路由时,将路由的权限数据rights赋值给当前路由的元数据meta
在permission.js文件中引入路由文件,取到当前路由的meta数据
action用来判断是否需要删除当前元素
effect用来判断是否需要禁用当前元素
第十二行的是elementUI的禁用样式
如果权限数据中没有包含该action,则删除当前按钮元素,如果设置了effect为禁用,则禁用按钮元素
在其他组件中的应用
权限数据一般包括,view查看,add添加,edit修改,delete删除
- 请求和响应的控制
请求控制
为了让服务器知道是哪一个用户在发送请求,需要在除了登录请求之外的所有的请求中都加上token
通过请求方式和权限的映射关系
响应控制
如果token超时,或者token被修改为无效token,则服务器会返给前端401,如果接收到401的状态码,则要跳转到登录界面,让用户重新登录
4. 小结