后臺(tái)管理系統(tǒng)的前端模板有很多 很多人都是拿來(lái)就用
但是作為一個(gè)有追求的前端享甸，我們要分析其中的用法牍鞠，并在我們自己的項(xiàng)目中應(yīng)用起來(lái)挨稿，實(shí)現(xiàn)高度的定制化
以下是權(quán)限的核心代碼
const whistlist=["/login"]
router.beforeEach(async(to,from,next)=>{
NProgress.start()
const hastoken=getToken() //從cookie中獲取token
if(hastoken){ //如果有token
if (to.path === '/login') {
// if is logged in, redirect to the home page
next({ path: '/' })
NProgress.done()
}else{
if(store.getters.roles && store.getters.roles.length > 0){ //如果權(quán)限r(nóng)oles 不為空
next()
}else{ //如果為空 我們?nèi)カ@取用戶信息和身份
let roles_
await store.dispatch("get_userinfo").then((roles)=>{// 獲取到當(dāng)前用戶的身份
roles_=roles
})
// 然后拿著身份去篩選路由
let accessRoutes
await store.dispatch("generateRoutes",roles_).then((result)=>{
accessRoutes=result
})
router.addRoutes(accessRoutes)
// router.options.routes.push(accessRoutes)
//next()
next({ ...to, replace: true })
}
}
}else{// 如果沒有token
if(whistlist.indexOf(to.path)!==(-1)){ //如果在白名單中 允許
next()
}else{
next("/login")
NProgress.done()
}
}
})
roles是儲(chǔ)存用戶身份的數(shù)組 表示你是管理員 還是超級(jí)管理員
generateRoutes是拿著身份去過(guò)濾異步的路由 然后返回結(jié)果 和原來(lái)的路由合并
generateRoutes的函數(shù)如下
generateRoutes(context,roles_){
let result
return new Promise((resolve,reject)=>{
if(roles_==="admin"){//如果是超級(jí)管理員 就獲取所有的異步路由
result=syncrouter
}else{
result=filter_router(syncrouter,roles_)
}
context.commit("SET_ROUTE",result)
resolve(result)
})
}
其中的filter_router是關(guān)鍵 是遞歸過(guò)濾路由 代碼如下 syncrouter是我們定義好的異步路由
export function filter_router(syncrouter,roles_){
let result=[];
syncrouter.forEach((value)=>{
if(value.meta.roles.indexOf(roles_)!==(-1)){ // 如果包含權(quán)限
if(value.children){
value.children=filter_router(value.children,roles_)
}
result.push(value)
}
})
return result
}
