vue框架基于element的权限控制
2017-12-15 本文已影响0人
屎香味十足
以前一直想搞一下vue的权限管理控制，但是之前的项目也没有涉及到很复杂的权限控制；最近有一个项目需要做权限控制，虽然不是自己做，但是也顺带研究了下，并写了一个demo，待会儿最下面会放上demo源码；主要vue-router新增了addRoutes()这个方法后，简单、方便了很多很多，我看之前做权限管理，是非常复杂且低效的，下面就来说下我的实现思路：
1.拿到的数据:
首先是拿到后端给的json数据，我这次写的demo的数据是这样的：
routesList:[
{
title: '首页',
path: '/home',
name: 'home'
},
{
title:'用户管理',
children:[
{
title: '用户列表',
path: '/account/user-list',
name: 'userList',
children:[
{
title: '用户编辑',
path: '/account/user-list/user-edit',
name: 'userEdit'
}
]
},
]
},
{
title:'运营操作',
children:[
{
title: 'SN码列表',
path: '/operation/sn-list',
name: 'sn-list'
},
{
title: '权限列表',
path: '/operation/mechanism-list/mechanism-power-list',
name: 'mechanism-power-list'
},
]
}
]
从这个数据格式可以看出，该权限分为三级，一级分别是：首页、用户管理、运营操作；然后就是对应一级目录下面的二级目录；这边数据中可以看到有这几个参数，title：该菜单的名称，path：该菜单的路由，name：该路由的名称，跳转时候使用name跳转时候使用；children字段中放子路由；
2.设定路由
- 固定的路由
固定的路由顾名思义是不需要权限动态加载的路由，及登录、404的路由，因为网站在没有登录时候，肯定是跳转到登录页面，所以不需要动态加载；404页面也是肯定是需要的，在路由错误的时候，跳转到404页面，所以就不需要动态加载了；具体如下：
const baseRoutes = [
{
path: '/login',
name: 'login',
component: resolve => require(['../views/login/login.vue'], resolve)
},
{
path: '/',
redirect: {
name: 'login'
},
},
{
path: '/404',
name: '404',
component: resolve => require(['../views/404/404.vue'], resolve)
}
];
- 需要动态加载的路由
虽然说是说动态加载，但是其实并不是说等到使用到的时候我们才去把路由加载，而是所有路由都已经是加载了，只是在router配置的时候，把权限列表中有的路由配置到routes中，这样在访问的时候，如果没有在权限列表中的路由就访问不到了，错误的路由就会跳转到404，这边需要有如下这些路由：
const asyncRouter = [
{
path: '/',
name: 'index',
component: (resolve) => require(['../views/index.vue'], resolve),
children: []
},
{
path: '/home',
name: 'home',
component: (resolve) => require(['../views/home/home.vue'], resolve),
},
// 账号管理路由
{
path: '/account/user-list',
name: 'user-list',
component: (resolve) => require(['../views/account/user-list/user-list.vue'], resolve),
},
{
path: '/account/user-list/user-edit',
name: 'user-edit',
component: (resolve) => require(['../views/account/user-list/user-edit/user-edit.vue'], resolve),
},
{
path: '/account/controller-list',
name: 'controller-list',
component: (resolve) => require(['../views/account/controller-list/controller-list.vue'], resolve),
},
{
path: '/account/controller-list/controller-edit',
name: 'controller-edit',
component: (resolve) => require(['../views/account/controller-list/controller-edit/controller-edit.vue'], resolve),
},
// 运营操作
{
path: '/operation/sn-list',
name: 'sn-list',
component: (resolve) => require(['../views/operation/sn-list/sn-list.vue'], resolve),
},
{
path: '/operation/mechanism-list',
name: 'mechanism-list',
component: (resolve) => require(['../views/operation/mechanism-list/mechanism-list.vue'], resolve),
},
{
path: '/operation/mechanism-list/mechanism-power-list',
name: 'mechanism-power-list',
component: (resolve) => require(['../views/operation/mechanism-list/mechanism-power-list/mechanism-power-list.vue'], resolve),
},
{
path: '/operation/mechanism-list/mechanism-power-list/mechanism-power-edit',
name: 'mechanism-power-edit',
component: (resolve) => require(['../views/operation/mechanism-list/mechanism-power-list/mechanism-power-edit/mechanism-power-edit.vue'], resolve),
}
];
3.权限数组与路由数组进行匹配
我们开始拿到的一份权限数组数据，里面包含的是有权限的路由信息；意思就是我这个数组中有的权限数据，需要把这些路由配置到routes数组中，那这边需要对应关系，假设权限数组为A数组，动态加载路由数组为B数组，需要配置的路由数组为C数组；A数组中第一个就是/home的路由，假设现在需要加一个path为/home的路由，那我需要从B数组筛选找到，并且把它push到C数组中，以此类推，A数组中有的path，都需要在B数组中筛选，然后push到C数组，最终C数组中包含的就是需要动态配置的路由数组信息，具体看如下代码：
- 筛选的实现思路是先将后端返回的路由数据处理成如下哈希结构：
hashMenus:{
'/home':true,
'/account/userList':true
}
- 然后遍历本地完整路由，在循环中将路径拼接成上述结构中的key格式，通过hashMenus[route]就可以判断路由是否匹配;然后将匹配成功的路由对象push到C数组中，最后通过addRoutes方法，就能将路由配置好，用户就能访问配置的路由了；
