项目-指令权限篇

前言

权限是一个后台管理系统最重要的要素之一，权限的合理划分可以提高任务的安全性，并且也可以提高生产效率。那么怎么去控制一个程序的权限呢？

权限的前后端

权限的控制也是分为前后端的。一般而言，权限交由后端控制是最安全稳妥的，因为前端控制权限只能通过对已经请求到的数据进行过滤，隐藏等操作，但这个时候客户端一定是已经拿到所有数据了，所以是有一定的安全风险的。

权限的类型

权限也是有分类的，在项目里面最常见的就是操作权限，菜单权限，角色权限等等。
操作权限
权限操作主要是对前端页面一些按钮或者输入框等用户可操作的元素进行控制，控制的方法也很简单，就是显示或者隐藏。这方面基本不需要后端的配合，也是最为简单的一种权限类型。
实现元素的显隐一般有两种方式：

1. 是给元素添加一个类，而类进行元素显隐的控制。
2. 是直接对元素进行删除操作。这里我们使用多元素的直接删除方法。
   直接使用自定义指令

个人页面修改按钮
<button v-primise="'user_modify'">修改</button>

//首先会考虑使用哪一个钩子函数，
//针对操作类权限，如果是使用了类名法，使用bind或者inserted都行
//如果是使用删除元素法，最好使用inserted，因为bind周期的时候元素的父元素不确定是否存在。
inserte(el, bind) {
	//注意bind里面vlaue和expression的区别
	const {value} = bind
	//获取当前用户的基本信息
	//在登录的时候后端会返回用户信息（一般来说里面会有用户可以操作的权限数组）
	const sysUserInfo = JSON.parse(sessionStorage.getItem('sysUserInfo'));
	let permiseArr = []
	let flag = false
	//取出许可的权限操作数组
	if(sysUserInfo) {
		// 例如拿到数据为：['user_modify', 'user_add', 'user_del']
		permiseArr = sysUserInfo.permise || []
	}
	//判断是否拥有权限
	flag = permiseArr.includes(vlaue)
	//进行元素的删除操作
	if(!flag && el.parentNode) {
		el.parentNode.removeChild(el)
	}
}

这种权限控制是精确到每一个用户身上的，可以更加细致分配用户权限，每个用户都可以有自己的专属权限。但是这样来说，要进行都部分用户进行统一权限分配会是相当困难的一件事。所以有些项目我们也可以考虑使用角色权限进行控制。

角色权限
所谓角色权限，顾名思义就是将用户分为不同的角色，不同角色拥有不同权限。这样可以进行同一角色不同用户的权限同一配置。而且我们可以在前端操作按钮的权限上不再存放单独的一格标识，而是使用数组结构，传入允许操作的角色名称

比较少用的角色权限控制操作权限，例如：

<button v-primise="['admin', 'manager']">修改</button>

inserte(el, bind) {
	const {value} = bind
	const sysUserInfo = JSON.parse(sessionStorage.getItem('sysUserInfo'));
	let userRole = ''
	let flag = false
	if(sysUserInfo) {
		//获取用户角色，默认为员工
		userRole = sysUserInfo.role || 'staff'
	}
	//用操作按钮上的角色权限匹配用户权限看是否拥有
	flag = value.includes(userRole)
	if(!flag && el.parentNode) {
		el.parentNode.removeChild(el)
	}
}

上面代码中，一般来说管理员拥有所有权限，所以甚至可以admin的权限控制
例如：

<button v-primise="['manager']">修改</button>

inserte(el, bind) {
	const {value} = bind
	const sysUserInfo = JSON.parse(sessionStorage.getItem('sysUserInfo'));
	let userRole = ''
	let flag = false
	if(sysUserInfo) {
		//获取用户角色，默认为员工
		userRole = sysUserInfo.role || 'staff'
	}
	//用操作按钮上的角色权限匹配用户权限看是否拥有
	flag = userRole === 'admin' ? true : value.includes(userRole)
	if(!flag && el.parentNode) {
		el.parentNode.removeChild(el)
	}
}

这样角色控制操作权限的方式最大的问题就是操作权限不能修改，被前端写死了，灵活性较低。

其实角色权限与操作权限经常是配合使用的，前端修改角色的操作权限，然后后端将角色里的所有用户的操作权限进行统一修改，登录时返回权限表。前端进行过滤隐藏元素。

菜单权限
菜单权限的控制也时常与角色权限绑定在一起。
在用户进行登录的时候会返回用户可以进行访问的页面路由，前端遍历路由生成导航栏进行跳转，这里就发现了很有意思的事情。有些项目的菜单权限是虚假权限，也就是说虽然菜单栏里面没有某个功能模块页面的链接，但是却可以直接通过网址的输入进行跳转，这是因为在路由文件里所有的页面都是真实存在的，只要识别到对应的路径，就会显示出对应的功能模块，这里也有两个解决方案。

1. 首先可以将路由文件里面需要进行权限控制的功能模块做成动态生成，也就是说在用户登录时，不仅仅返回的是用户可以进入哪些页面的路由，还要返回这些页面对应的路由对象，遍历手动生成路由文件，加入到原来的文件里面。
2. 还有一种简单的方法就是直接在路由对象里面的meta里面添加roles属性，属性可以为一个数组，存放可以访问的角色。

   const router = [
   	{
   		path: '/home',
           component: Home,
           hidden: true,
           meta: {
           	//角色
   			roles: ['admin','editor'],  
   			//标题
   		    title: 'title',         
   		    //图标     
   		    icon: 'svg-name'
   		}
   	}
   ]
   

   然后配合导航卫士beforeEach就可以实现菜单权限的控制。

   router.beforeEach((to, from, next) => {
   	//获取到当前用户角色
   	const userRole = '***'
   	if(to.meta.roles.includes(userRole)) {
   		next()
   	}else {
   		next('/404page')
   	}
   })
   

   上面只是一个简单的事例，真实项目要考虑的问题更多，需要具体问题具体分析。