## 方案一：动态生成路由（此方案仅适用于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.后端返回的路由地址
