[TOC]
### 3.1 路由权限控制
通过视图显示与路由拦截即可实现路由权限控制（不同用户可看、可访问的视图模块不同）
主要实现内容： 动态路由配置、路由重置、新路由写入、视图显示隐藏
#### 3.1.1 动态路由配置
简单的权限控制分为管理员与普通用户，可在前端直接配置两份路由，复杂的路由权限可由后台数据提供（前端不可能逐个配置不同用户的显示内容，那可太蠢了）
>[warning] 提供实例以基本权限控制为例
router.js
~~~
// 基本路由
const createRouter = () => {
return new Router({
routes: [
{
path: "/login",
name: "login",
meta: { auth: true },
component: () => import("@/views/Login.vue")
},
{
path: "/",
redirect: "/Index"
},
{
path: "*",
name: "404",
component: () => import("@/views/otherViews/NotFound.vue")
}
]
});
}
// 管理员路由配置
const allAsyncRouter = [
{
path: "/Index",
name: "index",
redirect: "Index/ServiceList",
component: Index,
children: [
{
path: "ServiceList",
name: "ServiceList",
redirect: {
name: "List"
},
component: () => import("@/views/serviceList/ServiceList.vue"),
children: [
{
path: "List",
name: "List",
component: () =>
import("@/views/serviceList/modules/ServiceList.vue")
}
]
},
{
path: "ServiceManager",
name: "ServiceManager",
component: () => import("@/views/serviceManager/ServiceManager.vue"),
},
{
path: "UserManage",
name: "UserManage",
component: () => import("@/views/userManage/userManage.vue")
}
]
}
]
// 普通用户路由配置
const asyncRouter = () => {
const arr = [];
allAsyncRouter.forEach(item => {
const temp = { ...item };
if (item && item.children) {
temp.children = item.children.filter(child => {
return child.name !== "UserManage";
});
}
arr.push(temp);
});
return arr;
};
~~~
