Vue后台管理系统权限控制

在web系统中，权限很久以来一直都只是后端程序所控制的，为什么呢？

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

一、权限的相关概念

1.权限的分类

（1）后端权限

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

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

cookie

session

token

• 后端的权限设计RBAC

用户

角色

权限

（2）前端权限

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

2.前端权限的意义

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

• 降低非法操作的可能性

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

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

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

• 提高用户体验

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

二、前端权限控制思路

1.菜单的控制

在登录请求中，会得到权限数据，当然，这个需要后端返回数据的支持。

前端根据权限数据，展示对应的菜单。

点击菜单，才能查看相关的界面。

2.界面的控制

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

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

3.按钮的控制

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

4.请求和响应的控制

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

三、Vue的权限控制实现

1.菜单的控制

（1）查看登录之后获取到的数据

{
  "data": {
    "id": 500,
    "rid": 0,
    "username": "admin",
    "mobile": "13999999999",
    "email": "123999@qq.com",
    "token": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjUwMCwicmlkIjowLCJpYXQiOjE1MTI1NDQyOTksImV4cCI6MTUxMjYzMDY5OX0.eGrsrvwHm-tPsO9r_pxHIQ5i5L1kX9RX444uwnRGaIM"
  },
  "rights": [{
      "i