[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;
};
~~~
