# 什么是权限控制

在项目中，尤其是在后台管理系统中，不同人员登陆，看到的页面菜单是不一样的，比如，一个公司的办公系统，老板登陆可以看到所有的页面，而普通员工登录可能无法看到公司业绩，营收情况的页面，比如公司的员工个人资料页面只有人力资源部门有权利看，其他部门的员工是不允许查看公司员工信息数据的。当然了除了页面的权限，还会有一些按钮级别的权限，比如一个下载按钮，有的帐号可以用，有的人不能用，比如学校的系统，一个页面中有一个确认成绩按钮，这个按钮只有老师有权利点击，其他学生登陆是无法点击的。

权限控制

1、接口访问的权限控制
2、页面的权限控制

• 菜单中的页面是否能被访问 (页面级访问权限)
• 页面中的按钮（增、删、改）的权限控制是否显示 （数据级操作权限）

思路

菜单控制:

在登录请求成功之,会得到权限数据当然,这个需要和后端商量返回数据的格式,前端根据权限数据,展示对应的菜单点击菜单,才能查看相关的界面。

界面控制:

界面控制有两种,第一种就是用户没有登录前,在地址栏中输入项目中非登录页的项目地址,这时应该将其访问拦截重定向到登录页。 第二种就是针对不同的用户,有些特定用户所拥有的特定页面就不应该呈现给用户,即使他非法敲入看到的地址也不行,输入非法地址,应该给他重定向到404页面。

按钮控制:

不同的用户对按钮的操作权限不同,第一种用户只能查看数据,不能更改数据,有的用户则拥有对数据增删改查的功能,所以同一个按钮当用户没有权限的时候我们应该给他隐藏或者禁用。第二种则是,一个页面存在多个tabs标签页面,我们也应该根据权限的不同做不同的展示。

请求和响应的控制:

对于超出用户权限以外的请求和响应对系统来说都是不必要的,会造成不必要的服务器开销和时间成本,这种请求和响应都是需要控制的,让其根本无法发送,比如一个编辑按钮,由于没有权限,在页面上是把当前按钮禁用了的,但是如果用户打开控制台,强行将此按钮的disabled属性置为true,这个时候没有权限的用户还是可以操作这个按钮,虽然可能后台最终会做拦截但是对用户来说体验不是很好,所以我们对当前发出的非法请求还是需要做出拦截。

1、用户管理  --》 分配角色  
2、角色管理  --》 设置角色  
3、权限管理  --》向不同角色分配不同权限（模块）  
4、模块管理  --》模块名，路由path，路由name，引入组件地址componentPath，是否在菜单显示isShow，父id 层级关系

动态路由(菜单相关)

动态路由介绍：

动态即不是写死的,是可变的。我们可以根据存在的权限加载对应的路由,没有权限的路由我们就不加载,避免造成资源浪费,也算对项目的一个优化点了,动态路由的使用一般结合角色权限控制一起使用。

动态路由的优点:

安全性,当用户手动输入没有权限的地址进入某一个页面的时候,会自动重定向到404,无需我们单独在路由守卫里面进行控制 灵活,可以配置菜单的增加、减少,这样不用每次修改再去处理。后续的菜单增加,路由统一处理，方便快捷。

页面级权限控制

1.后端返回路由信息，前端存储完整路由表：

前端拿到路由信息采取递归的方式动态生成页面菜单。自己本身的router.js文件定义好页面所有的路由。这种方式弊端很明显，并不能实现真正的权限控制，因为如果用户记住了某个理由，用户不点击菜单，直接在地址栏里输入地址，那么页面还是可以显示出来

2.后端返回路由权限名，前端存储完整路由权限表，并动态生成路由(真正的权限控制)

首先前端router.js文件存储的路由配置信息会分为两部分，分别是需要权限的和不需要权限的。 页面一开始不能一个路由没有，所以会有一些不需要权限的页面，比如登录页，404页面等。所以一开始直接渲染 这个不需要权限的路由表，等后台返回之后再把需要权限的路由加到当前路由里面形成一个全新的路由表就可以了