开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第1天,点击查看活动详情
Vue权限控制
在Web系统中,权限很久以来一直都只是后端程序所控制的,为什么呢?因为Web系统的本质围绕的是数据,而和数据库最紧密接触的是后端程序所以在很长的一段时间内,权限一直都只是后端程序需要考虑的话题,但是随着前后端分离架构的流行,越来越多的项目也在前端进行权限控制。
权限相关概念
后端权限
从根本上讲前端仅仅只是视图层的展示,权限的核心是在于服务器中的数据变化,所以后端才是权限的关键,后端权限可以控制某个用户是否能够查询数据,是否能够修改数据等操作
前端权限
前端权限的控制本质上来说,就是控制前端的视图层的展示和前端所发送的请求,但是只有前端权限控制没有后端权限控制是万万不可的前端权限控制只可以说是达到锦上添花的效果。
前端权限控制思路
菜单的控制
- 在登录请求中,会得到权限数据,当然,这个需要后端返回数据的支持前端根据权限数据,展示对应的菜单.点击菜单才能查看相关的界面.(不同用户的菜单列表不一样)
界面的控制
- 如果用户没有登录,手动在地址栏敲入管理界面的地址,则需要跳转到登录界面
- 如果用户已经登录可是手动敲入非权限内的地址,则需要跳转404界面
按钮的控制
- 在某个菜单的界面中,还得根据权限数据,展示出可进行操作的按钮,比如删除,修改,增加
请求和响应的控制
- 如果用户通过非常规操作,比如通过浏览器调试工具将某些禁用的按钮变成启用状态,此时发的请求,也应该被前端所拦截