Vue权限控制

在Web系统中, 权限很久以来一直都只是后端程序所控制的。为什么呢? 因为Web系统的本质围绕的是数据, 而和数据库最紧密接触的是后端程序.所以在很⻓的一段时间内, 权限一直都只是后端程序需要考虑的 话题.但是随着前后端分离架构的流行, 越来越多的项目也在前端进行权限控制.

权限相关概念

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

后端如何知道该请求是哪个用户发过来的？

cookie
session
token

后端的权限设计RBAC

用户
⻆色
权限

前端权限

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

• 前端权限的意义

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

  降低非法操作的可能性

不怕贼偷就怕贼惦记, 在⻚面中展示出一个 就算点击了也最终会失败 的按钮, 势必会增加有心者 非法操作的可能性

尽可能排除不必要请求,减轻服务器压力

没必要的请求, 操作失败的请求, 不具备权限的请求, 应该压根就不需要发送, 请求少了, 自然也会减轻服务器的压力

提高用户体验

根据用户具备的权限为该用户展现自己权限范围内的内容，避免在界面上给用户带来困扰, 让用户 专注于分内之事

前端权限控制思路

• 菜单的控制

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

• 界面的控制

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

• 按钮的控制

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

• 请求和响应的控制

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