vue权限管理篇

Hello,大家中秋快乐呀。想必大家的公司基本上都会有自己的后台管理系统吧，那肯定就是管理人员和公司高管登上系统看到肯定和普通员工不一样的甚者可以说是每一个人有一种权限，今天在这里给大家分享一下我写的。

一：解决思路
虽然权限是动态的每一个人都是不一样的，但是也有一样公共的部分（登录页面，首页等等），这样咱们就可以大致的把路由表就可以分为二个部分（1：固定路由，2：权限路由）。当前登录人的权限是什么，拿到权限数组以后咱们处理好router的格式添加即可（这里我使用的vuex）。最后一步拿到生成以后的权限数组添加到当前路由中就即可。

 1：路由表分开（公共静态路由，动态路由）
 2：拿到后端返回的权限集合处理成我们可以用的格式
 3：把处理后的权限集合添加到当前router对象中

二：路由表配置

**静态路由表**
export const constantRouterMap = [{
	path: '/login',   登录页面
	component: () => import('@/views/login/index'),
	hidden: true
},
{
	path: '/404', 
	component: () => import('@/views/404'),
	hidden: true
},
{
	path: '/',  //首页
	component: Layout,
	redirect: '/dashboard',
	name: 'Dashboard',
	hidden: true,
	children: [{
		path: 'dashboard',
		component: () => import('@/views/dashboard/index')
	}]
}}

export default new Router({
	// mode: 'history', //后端支持可开(路由History模式)
	scrollBehavior: () => ({
		y: 0
	}),
	routes: constantRouterMap
});


**动态路由表**
export const asyncRoutes = [
	{
		path: '/example',
		component: Layout,
		redirect: '/example/allTheTasks',
		name: 'example',
		meta: {
			title: '主管',
			icon: 'example',
			roles: ['主管'],
			sortId: 0,
		},
		children: [{
			path: 'allTheTasks',
			name: 'allTheTasks',
			component: () => import('@/views/allTheTasks/index'),
			meta: {
				title: '主管1',
				roles: [‘主管’，'我的任务'],
			}
		},
		{
			path: 'tree',
			name: 'tree',
			component: () => import('@/views/tree/index'),
			meta: {
				title: '主管2',
				roles: [‘主管’，'分配任务'],
			}
		}
		]
	},
	{
		path: '/form',
		component: Layout,
		redirect: '/form/allCase',
		name: 'form',
		meta: {
			title: '管理员',
			icon: 'form',
			roles: ['admin'],
			sortId: 1,
		},
		children: [{
			path: '/allCase',
			name: 'allCase',
			component: () => import('@/views/allCase/allCase'),
			meta: {
				title: '全部案件',
				roles: ['admin','全部案件'],
			}
		},
		{
			path: '/signBill',
			name: 'signBill',
			component: () => import('@/views/signBill/index'),
			meta: {
				title: '我的签单',
				roles: ['admin','我的签单'],
			}
		}
		},
     { path: '*', redirect: '/404' }      //作用是没有权限的时候不给用户显示空白给一个好的用户体验。
     //注意这里404,Path为*的时候一定要放到路由表的最后面。
	}}

  **路由表种的roles这个字段是用来获取权限的，这样每次有新页面添加的时候
    只需要给后端定义一个名称就可以，后端返回的权限集合大概为["高管","主管1"]
    拿到这个我们来做处理找到对应的路由表即可，这样前端比较麻烦一点。
    还有一种方法就是后端直接把咱们正规的路由返会来这样前端拿到这接添加就可以了
    但是以后迭代更新是很痛苦的呀！！！
   **

三：创建vuex来获取用户权限集合

import { asyncRoutes, constantRouterMap } from '@/router'  //把路由表引入进来

//处理为前端路由表格式数据的函数
  function filterAsyncRoutes(routes, roles) {
   const res = []
   routes.forEach(route => {
       const tmp = { ...route }
       if (hasPermission(roles, tmp)) {
           if (tmp.children) {
               tmp.children = filterAsyncRoutes(tmp.children, roles)
           }
           res.push(tmp)
       }
   })
   return res
}

function hasPermission(roles, route) {
   if (route.meta && route.meta.roles) {
       return roles.some(role => route.meta.roles.includes(role))
   } else {
       return true
   }
}





   const user = {
     state: {
    	roles: [],    //这里来存后端返回的权限数组
    	addRoutes:[] //这里存最后添加的路由
     },
    mutations:{  //同步方法
   			SET_ROLES: (state, roles) => {  
   				state.roles = roles ； 
   			},
   		     SET_ROUTES: (state, routes) => {
   		        state.addRoutes = routes ; 
   		    }
   	},
   	actions(){  //异步方法
            GetInfo({ commit, state }) {  //获取用户权限集合
   			    return new Promise((resolve, reject) => {
   			        const data = JSON.parse(localStorage.getItem('admin_login'))
   			        if (data.length) {
   			            commit('SET_ROLES', data); //这里的data大概为["xxx","admin"]
   			            resolve(data)
   			        } else {
   			            reject('nologin')
   			        }
   			    })
            },
            generateRoutes({ commit }, roles){ //造数据转为最后添加的数据
               return new Promise((resolve,reject)=>{
                      let accessedRoutes = asyncRoutes || [];   //asyncRoutes 动态路由表
   		            accessedRoutes = filterAsyncRoutes(asyncRoutes, roles) //roles传的后台返回的路由表
   		            commit('SET_ROUTES', accessedRoutes)
   		            resolve(accessedRoutes)
           }) 
         } , 
   		 }

四：路由拦截器添加动态路由

注意上面记得引入vuex和router
import router from './router'
import store from './store'
 router.beforEach(to,form,next){
      //to（去哪）  form(从哪里)
      if(to.path=="/login") addRoutes(to,next);
      else next()
  }

 function  addRoutes(to,next){
    let roles = store.state.roles.length && stroe.state.role;   //vuex刷新以后会清除所有咱们这里用这个权限集合来判断当前是不刷新状态。
    if(roles) next();  //后端返回的权限数组Length不为0就表示当前用户已经拉取完权限直接过就可以
    else{  //首次进入没有获取权限
      store.dispatch('GetInfo').then(res=>{  //获取权限数组["xxxx",'xx22']
             store.dispatch('generateRoutes',res).then(roles=>{ //找到匹配的路由表
                //roles就是最终可以添加的路由表,处理过程在vuex中进行
                  router.addRoutes(roles);  //添加路由
                   next({ ...to, replace: true })  //保证路由添加完成以后才能通过
         })
       })
      }
 }

到这里就大功高成了，谢谢大家