管理系统的权限控制(vue)

最新推荐文章于 2024-07-29 11:45:48 发布

置顶

57993

最新推荐文章于 2024-07-29 11:45:48 发布

阅读量649

点赞数 2

分类专栏：面试文章标签： javascript html vue.js es6 postcss

本文链接：https://blog.csdn.net/weixin_48728668/article/details/112038364

版权

本文探讨了前端权限控制的重要性，包括菜单控制、界面控制、按钮控制和请求响应控制。详细介绍了实现步骤，如利用登录后返回的权限数据动态渲染菜单，设置路由导航守卫和动态路由，以及使用自定义指令控制按钮权限。强调了前端权限控制在降低非法操作、减轻服务器压力和提升用户体验方面的价值。

摘要由CSDN通过智能技术生成

一、权限相关概念

1.1 权限的分类

后端权限
从根本上讲前端仅仅只是视图层的展示，权限的核心是在于服务器中的数据变，所以后端才是权限的关键，后
端权限可以控制某个用户是否能够查询数据，是否能够修改数据等操作

后端如何知道该请求是哪个用户发过来的
cookie
session
token
后端的权限设计RBAC
用户
角色
权限

前端权限

前端权限的控制本质上来说，就是控制端的视图层的展示和前端所发送的请求。但是只有前端权限控制没有
后端权限控制是万万不可的。前端权限控制只可以说是达到锦上添花的效果．

1.2 前端权限的意义

如果仅从能够修改服务器中数据库中的数据层面上讲，确实只在后端做控制就足够了，那为什么越来越多的项目也
进行了前端权限的控制，主要有这几方面的好处

降低非法操作的可能性
不怕赃偷就怕贼惦记，在页面中展示出一个就算点击了也最终会失败的按钮，势必会增加有心者非法操作的可能性
尽可能排除不必要清求，减轻服务器压力
没必要的请求，操作失败的清求，不具备权限的清求，应该压根就不需要发送，请求少了，自然也会减轻服务器的
压力
提高用户体验
根据用户具备的权限为该用户展现自己权限范围内的内容，避免在界面上给用户带来困扰，让用户专注于分内之事

二、前端权限控制思路

2.1 菜单的控制

在登录请求中，会得到权限数据，当然，这个需要后端返回数据的支持．前端根据权限数据，展示对应的菜单．点击菜单，才能查看相关的界面

2.2 界面的控制

如果用户没有登录，手动在地址栏敲入管理界面的地址，则需要跳转到登录界面

如果用户已经登录，如果手动敲入非权限内的地址，则需要跳转404 界面

2.3 按钮的控制

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

2.4 请求和响应的控制

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

三、实现步骤

3.1 权限菜单栏控制

用户登录之后服务端返回一个数据，这个数据有菜单列表和token，我们把这个数据放入到vuex中，然后主页根据vuex中的数据进行菜单列表的渲染

问题： 刷新界面vuex数据消失，菜单栏消失

解决： 将数据存储在sessionStorage中，并让其和vuex中的数据保持同步

3.2 界面的控制

登录成功后，将token数据存储在sessionStorage中，判断是否登录

router.beforeEach((to,from,next)=>{
   
    if(to.path==='/login'){
   
       next()
    }else{
   
	   const token = sessionStorage.getItem('token');
        if(!token){
   
           next('/login')
        }else{
   
            next()
        }
    }
})