## 方案一：動態生成路由（此方案僅適用于vue）
1.當用戶登陸后返回該用戶所擁有的路由表
~~~js
// 后端返回的 JSON 動態路由結構
const servicePermissionMap = {
"message": "",
"result": [
{
"title": "首頁",
"key": "",
"name": "index",
"component": "BasicLayout",
"redirect": "/dashboard/workplace",
"children": [
{
"title": "儀表盤",
"key": "dashboard",
"component": "RouteView",
"icon": "dashboard",
"children": [
{
"title": "分析頁",
"key": "analysis",
"icon": ""
},
{
"title": "監控頁",
"key": "monitor",
"icon": ""
},
{
"title": "工作臺",
"key": "workplace",
"icon": ""
}
]
},
{
"title": "系統管理",
"key": "system",
"component": "PageView",
"icon": "setting",
"children": [
{
"title": "用戶管理",
"key": "userList"
},
{
"title": "角色管理",
"key": "roleList"
},
{
"title": "權限管理",
"key": "tableList"
}
]
}
]
}
],
"status": 200,
"timestamp": 1534844188679
}
~~~
2.使用`router.addRoutes `動態掛載到 router 上
## 方案二：在路由地址中綁定角色權限
1.在路由表中實現路由地址和角色的綁定
~~~
const routes: Routes = [
{
path: 'guard',
component: GuardComponent,
children: [
// 角色限定
{ path: 'auth',
component: GuardAuthComponent,
data: { guard: 'user' } //綁定角色
},
{
path: 'admin',
component: GuardAdminComponent,
data: { guard: 'admin' } //綁定角色
}
]
];
~~~
2.使用路由守衛當路由發生變化時進行判斷
缺點：
1.使用此方法路由和角色寫死在路由表中，無法做到動態配置權限。
2.若要實現動態配置需要在每次進入路由時發起請求，根據請求結果進行權限判斷。
## 方案三：后端返回該角色路由表，前端進入路由時判斷路由是否在路由表中
1.后端返回的路由地址
