## 方案一：動態(tài)生成路由（此方案僅適用于vue）
1.當(dāng)用戶登陸后返回該用戶所擁有的路由表
~~~js
// 后端返回的 JSON 動態(tài)路由結(jié)構(gòu)
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": "監(jiān)控頁",
"key": "monitor",
"icon": ""
},
{
"title": "工作臺",
"key": "workplace",
"icon": ""
}
]
},
{
"title": "系統(tǒng)管理",
"key": "system",
"component": "PageView",
"icon": "setting",
"children": [
{
"title": "用戶管理",
"key": "userList"
},
{
"title": "角色管理",
"key": "roleList"
},
{
"title": "權(quán)限管理",
"key": "tableList"
}
]
}
]
}
],
"status": 200,
"timestamp": 1534844188679
}
~~~
2.使用`router.addRoutes `動態(tài)掛載到 router 上
## 方案二：在路由地址中綁定角色權(quán)限
1.在路由表中實現(xiàn)路由地址和角色的綁定
~~~
const routes: Routes = [
{
path: 'guard',
component: GuardComponent,
children: [
// 角色限定
{ path: 'auth',
component: GuardAuthComponent,
data: { guard: 'user' } //綁定角色
},
{
path: 'admin',
component: GuardAdminComponent,
data: { guard: 'admin' } //綁定角色
}
]
];
~~~
2.使用路由守衛(wèi)當(dāng)路由發(fā)生變化時進行判斷
缺點：
1.使用此方法路由和角色寫死在路由表中，無法做到動態(tài)配置權(quán)限。
2.若要實現(xiàn)動態(tài)配置需要在每次進入路由時發(fā)起請求，根據(jù)請求結(jié)果進行權(quán)限判斷。
## 方案三：后端返回該角色路由表，前端進入路由時判斷路由是否在路由表中
1.后端返回的路由地址
AI寫作智能體 自主規(guī)劃任務(wù)，支持聯(lián)網(wǎng)查詢和網(wǎng)頁讀取，多模態(tài)高效創(chuàng)作各類分析報告、商業(yè)計劃、營銷方案、教學(xué)內(nèi)容等。
![]()
廣告