參考了之篇文章
1、我在登陸時(shí)獲取到登錄用戶的角色名roles，并存入sessionStorage中，具體是在login頁(yè)面實(shí)現(xiàn)，還是在menu頁(yè)面實(shí)現(xiàn)都可以。在menu頁(yè)面實(shí)現(xiàn)，可以顯得登陸快一些。
2、編寫(xiě)router.js，注意，一個(gè)用戶可能有多個(gè)角色。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-647219.html
//以下為一個(gè)路由例子
{
path: "/xxxx/xxxx",
component: () => import('@/components/xxx'),
name: "隨便取個(gè)名字",
meta: {
roles:['角色1','角色2','角色3']
}
}
//在路由跳轉(zhuǎn)前進(jìn)行判斷
router.beforeEach((to,from,next) => {
//設(shè)置直接通過(guò)的路由地址
if(to.path === "/" || to.path === "/login" || to.path === "/menu") {
next();
}else {
const tokenStr = localStorage.getItem("token")
//如果token沒(méi)有了，直接返回登錄界面，即長(zhǎng)時(shí)間沒(méi)有操作。
if (!tokenStr) {
return next("/login");
}else {
//數(shù)據(jù)庫(kù)中的roles以“角色1，角色2，角色3”的字符串存儲(chǔ)，使用split分割成數(shù)組
const roles = sessionStorage.getItem("userRole").split(",")
//這里表示路由設(shè)置的roles中內(nèi)有內(nèi)容，我們沒(méi)有設(shè)置權(quán)限，那么直接放行。
if(to.meta.roles.length === 0){
next()
}else{
//這里表示做循環(huán)，只要有一個(gè)滿足就可以跳轉(zhuǎn)了。
for (let i = 0; i < to.meta.roles.length; i++){
//roles中有一個(gè)與用于的角色匹配就行
if(roles.includes(to.meta.roles[i])){
next()
}
}
}
}
}
這里有個(gè)bug
我們的roles存在sessionStorage中，關(guān)閉那個(gè)網(wǎng)頁(yè)就沒(méi)有了。但是token還在，就會(huì)產(chǎn)生報(bào)錯(cuò)，我們做一下判斷最好?；蛘甙裷oles也存在localstorage中文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-647219.html
到了這里，關(guān)于Vue前端 更具router.js 中的meta的roles實(shí)現(xiàn)路由衛(wèi)士，實(shí)現(xiàn)權(quán)限判斷。的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
