首先說明需求目的，一般在未登陸情況下預設跳轉至login頁面，因此需要導航守衛來確保這一需求。例如忘記密碼，註冊，404各類提醒等頁面的跳轉並不需要使用者進行登陸驗證token操作，因此我們設定了路由白名單讓這些路由可以直接渲染。例如角色admin和user需要使用者進行登陸操作，這時我們就需要在路由中配置meta的許可權role: [『admin』, 『user』]來判斷需要可以訪問的許可權。
// 路由白名單
var constrouters =[}
,},}
,},}
]export
default constrouters
在構建routers 路由資訊的時，我們新增 meta 配置，在meat中新增路由對應的許可權，然後在路由導航守衛中判斷相關許可權，控制路由跳轉。
可以在每乙個路由的 meta 屬性裡，將能訪問該路由的角色新增到 roles 裡。使用者每次登陸後，將使用者的角色返回。然後在訪問頁面時，把路由的 meta 屬性和使用者的角色進行對比，如果使用者的角色在路由的 roles 裡，那就是能訪問，如果不在就拒絕訪問。
方法1：
// 路由資訊
const routers =[}
,},]
//例項化vue的時候只掛載constrouters
let router =
newvuerouter()
// 加入其它路由
router.
addroutes
(routers)
//假設有兩種角色：admin 和 user
//從後台獲取的使用者角色
const role =
'user'
//當進入乙個頁面是會觸發導航守衛 router.beforeeach 事件
router.
beforeeach
((to,
from
,next)
=>if(
!sessionstorage.
getitem
('token'
)&& to.name !==
'login'))
return}if
(to.meta.roles.
includes
(role)
)esle
)//跳到404頁面}}
)
Vue路由許可權控制分析
本人在公司主要負責中後台系統的開發，其中路由和許可權校驗算是非常重要且最為基本的一環。實際開發專案中，關於登入和路由許可權的控制參照了vue element admin這個明星專案，並在此基礎上基於業務進行了整合，接下來我會以這個專案為例，仔細地剖析整個路由和許可權校驗的過程，也算是對這個知識點的一...
Vue 許可權控制的方法 路由驗證
路由元資訊 meta 如果乙個 有不同的角色，比如 管理員 和 普通使用者 要求不同的角色能訪問的頁面是不一樣的 這個時候我們就可以 把所有的頁面都放在路由表裡 只要 在訪問的時候判斷一下角色許可權 如果有許可權就讓訪問，沒有許可權的話就拒絕訪問，跳轉到404頁面 vue router 在構建路由時...
基於角色的許可權控制
asp forums中基於角色的許可權控制 asp.頁面如何控制頁面依據不同使用者許可權有不可見 可見 編輯 三種操作許可權 做過許可權管理和想做許可權管理的人進來 附我的思路 懇求許可權分配的例子 高分求使用者許可權管理 c 或演算法 請問在 artclient應用中,如何做到科學的身份驗證和許可...