后台管理系统的权限控制与管理

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

前端权限的意义

进行前端权限的控制，主要有这几方面的好处

降低非法操作的可能性
尽可能排除不必要清求，减轻服务器压力
提高用户体验

前端权限控制思路

菜单的控制

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

界面的控制

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

按钮的控制

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

请求和响应的控制

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

三、实现步骤

3.1 权限菜单栏控制

用户登录之后服务端返回一个数据，这个数据有菜单列表和token，我们把这个数据放入到vuex中，然后主页根据vuex中的数据进行菜单列表的渲染

问题： 刷新界面vuex数据消失，菜单栏消失

解决： 将数据存储在sessionStorage中，并让其和vuex中的数据保持同步

3.2 界面的控制

登录成功后，将token数据存储在sessionStorage中，判断是否登录

1. 路由导航守卫

router.beforeEach((to, from, next) => {
	if(to.path !== '/login') {
		const token = sessionStorage.getItem('tokem')
		if(!toke){
			next('/login')
		}
	}
	next()
})

问题： 这样用户在登录之后就可以访问其他界面了，但如果用户A登录之后他只能访问a页面，他不能访问b页面，但是这时候他还是可以通过地址栏输入进入到b页面

解决： 当然我们也可以设置路由导航守卫，但是如果有多个页面，设置会非常不方便，并且对于用户A来说，它是不用访问b页面的，这时候我们何不对A不显示b页面，这个时候我们就用到了动态路由

2. 动态路由

根据当前用户所拥有的的权限数据来动态添加所需要的路由

先定义好所有的路由规则

登录成功之后动态添加路由，注意这个initDynamicRoutes的方法需要暴露出去在登录页面调用

export function initDynamicRoutes(){
  // 根据二级权限， 对路由规则进行动态添加
	const currentRoutes = router.options.routes // 获取当前路由
	const rightList = store.state.rightList // 拥有权限的列表
	rightList.forEach(item => {
		item.children.forEach(item => {
			cinst temp = ruleMapping[item.path]
			temp.meta = item.rights // 设置路由元信息
			currentRouters[2].children.push(temp) // 添加动态路由
		})
	})
}

这样当用户A在地址栏输入自己不能访问的路由时，则不会跳转到该页面，跳转到404页面

问题： 如果我们重新刷新的话动态路由就会消失，动态路由是在登录成功之后才会调用的，刷新的时候并没有调用，所以动态路由没有添加上

解决： 可以在app.vue中的created中调用添加动态路由的方法

export default {
	name: 'app',
	created() {
		initDynamicRoutes()
	}
}

3.3 按钮的控制

虽然用户可以看到某些界面了，但是这个界面的一些按钮该用户可能是没有权限的。因此，我们需要对组件中的一些按钮进行控制，用户不具备权限的按钮就隐藏或者禁用，而在这块的实现中，可以把该逻辑放到自定义指令中，比如我们可以根据后端返回的数据right来判断用户有什么权限

 // => rights: ['view']
{
	id: 1001,
  name: '商品管理'，
  children: [
  	{
  		id: 101
  		name: '商品列表'
  		path： 'goods'
  		rights: ['view', 'add']
		}
  ]
}

创建自定义指令：permission.js

import Vue from 'vue'
import router from '@/router.js'

Vue.directive('permission', {
	inserted: function(el, binding) {
		const action = binding.value.action // 对应自定义指令中的add
		const currentRight = router.currentRoute.meta //获取当前路由元信息
		if(currentRight && currentRight.indexOf(action) == -1) { // 判断当前路由对应的组件中，用户是否具备action的权限
			// 没有权限
			const type = binding.value.effect
			// 根据类型参数 type 对元素进行禁用或移除操作
			if(type === 'disabled') { 
				el.disabled = true
				el.classList.add('is-disabled')
			} else {
				el.parentNode.removeChild(ed)
			}
		}
	}
})

添加自定义指令控制按钮

<el-button
  type='primary'
  v-permission = '{action: "add", effect: "disabled"}'
> 添加用户
</el-button>

3.4 请求和响应的控制

请求控制

如果发出了非权限内的请求，应该直接在前端范围内阻止：比如a用户是不能够操作该页面的按钮的，但是他通过f12调试把按钮改为可点击，如果我们不对这个请求进行处理，那么这个请求就会发送出去

import axios from 'axios'
import Vue from 'vue'
import router from '../router'

const actionMapping = {
	get: 'view',
	post: 'add',
	put: 'edit',
	delete: 'delete'
}

// 请求拦截
axios.interceptors.request.use(req => {
	const currentUrl = req.url
	 if(currentUrl !== 'login') { // 不是登录的请求，在请求头中加入token
    req.headers.Authorization = sessionStorage.getItem('token')
		const method = req.method  // 获取请求方法
		const action = actionMapping[method] // 获取请求方法约定的action
		// 判断 action 是否存在当前路由的权限中
		const rights = router.currentRouter.meta
		if(rights && rights.indexOf(action) == -1) {
			// 没有权限
			return Promise.reject(new Error('没有权限'))
    }
  }
  return req
})

响应控制

得到了服务器返回的状态码401, 代表token 超时或者被篡改了，此时应该强制跳转到登录界面

axios.interceptors.response.use(res => {
  if(res.data.meta.status === 401){
    router.push('/login')
    sessionStorage.clear()
    window.location.reload()
  }
  return res
})

小结

前端权限的实现必须要后端提供数据支持，返回的权限数据的结构，前后端需要沟通协商怎样的数据便用起来才最方便

菜单控制

权限的数据需要在多组件之间共享，因此采用vuex
防止刷新界面，权限数据丢失，所以需要存在sessionStorage，并目要保证两者的同步

界面控制

路由的导航守卫可以防止跳过登录界面
动态路由可以让不具备权限的界面的路由规则压根就不存在

按钮控制

路由规则中可以增加路由元数据meta
通过路由对象可以得到当前的路由规则以及存在此规则中的meta 数据
自定义指令可以很方便的实现按钮控制

请求和响应控制

请求拦截器和响应拦截器的使用

请求方式和风格的约定restful

// restful风格请求
// get: view
// post: add
// put: edit
// delete: delete