vue权限控制

最新推荐文章于 2024-07-01 21:01:42 发布

xiaoyu九届

最新推荐文章于 2024-07-01 21:01:42 发布

阅读量228

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/xiaoyuqwer/article/details/115425421

版权

1. 权限的相关概念
状态保持：在不发送用户账户名和密码的情况下，后端依然知道是哪个用户在发送请求，一般情况下有三种方式来实现状态保持，cookie，session和token，前后端分离的架构中，token用的比较多

token是一堆字符串，用来标识用户的唯一性，为了让后端知道是哪个用户在请求数据，因此在请求头当中，前端一般要将token传给后端
在这里插入图片描述
2. 前端权限的意义
没必要的按钮不显示
没必要的请求不发送
没必要的页面不显示

3. 前端权限控制思路

在这里插入图片描述
刷新页面菜单栏消失

在这里插入图片描述
退出登录既要清空sessionStorage中的数据，又要清空vuex中的数据
清空vuex的数据有两种方法，一种是用action，mutation清空，一种是跳转界面后刷新界面清空数据，两种方法都可以，建议用第一种方法
方法一：
在这里插入图片描述

方法二：
在这里插入图片描述

界面的控制
路由导航守卫，防止用户跳过登录界面
动态路由
根据用户所拥有的的权限数据动态添加路由，有些非用户权限的界面直接不要加载路由，防止用户自己手动输入路径访问非权限内的界面
动态添加路由的方法有两个调用场景，一个场景是登录成功后，一个场景是登录成功以后刷新页面时，router.js中的路由会重置为动态添加路由前的路由，这时菜单会消失，因为你刷新的时候已经登录过了，login方法已经调用过了，动态路由也加载过了，如果这时再刷新，不会再调用login方法中动态路由的方法了，所以为了防止刷新页面菜单消失，要在App.vue组件的created方法中再调用动态添加路由的方法，这样刷新界面的时候，会重新调用App.vue组件中的动态添加路由方法，这样权限路由不会因为刷新而不显示

路由要写成这种模式export default 暴露出去才可以打印出具体的路由信息

在这里插入图片描述

insterted钩子函数，会在指令（元素）被插入到dom节点的时候被调用，函数接收两个参数，一个是el，当前使用这个指令的dom元素，第二个参数binding，指这个指令后面所绑定的数据，可以打印一下el和binding，看看内容

如何拿到当前用户在该路由或者页面下的按钮权限？
添加动态路由时，将路由的权限数据rights赋值给当前路由的元数据meta
在这里插入图片描述

在permission.js文件中引入路由文件，取到当前路由的meta数据

action用来判断是否需要删除当前元素
effect用来判断是否需要禁用当前元素
在这里插入图片描述

第十二行的是elementUI的禁用样式
如果权限数据中没有包含该action，则删除当前按钮元素，如果设置了effect为禁用，则禁用按钮元素

在其他组件中的应用
权限数据一般包括，view查看，add添加，edit修改，delete删除
在这里插入图片描述

在这里插入图片描述
响应控制
如果token超时，或者token被修改为无效token，则服务器会返给前端401，如果接收到401的状态码，则要跳转到登录界面，让用户重新登录

4. 小结

关注