vue router 路由鑑權（非動態路由）

實際系統中還有幾種管理員，此處略去，以精簡描述。

原本想用動態路由的思路去做，按許可權載入對應路由表，但是由於許可權可以交叉（比如乙個人可以同時是主題管理員和資料服務管理員），導致許可權路由表還是得去做判斷組合。於是放棄了這個思路，索性就在beforeeach裡直接判斷了。

路由概覽

// index.js

import vue from 'vue'
import router from 'vue-router'
import labelmarket from './modules/label-market'
import personalcenter from './modules/personal-center'
import systemsetting from './modules/system-setting'
import api from '@/utils/api'
vue.use(router)
const routes = [
, children: [
,children: labelmarket},,
]}, ]
const router = new router()

// personal-center.js

export default [
..., },
...]
}]

export default [

..., component: () => import(/* webpackchunkname: "system-setting" */ '@/views/system-setting/api/index.vue')
},, component: () => import(/* webpackchunkname: "system-setting" */ '@/views/system-setting/theme/index.vue')
},...
]

_userinfo:

判斷當前路由是否需要鑑權（router中meta欄位下requireauth是否為true），讓公共頁面直接放行；

判斷角色是超級管理員，直接放行；

（本系統特殊邏輯）判斷跳轉路徑是主題設定但角色不為主題管理員，繼續判斷角色是否為資料服務管理員，跳轉資料服務設定頁or重定向（『系統設定』選單'/label/system-setting'預設重定向到'/label/system-setting/theme'，其他選單預設重定向的都是基礎公共頁面，故需要對這裡的重定向鑑權。系統設定的許可權不是主題管理員就一定是資料服務管理員，所以能這樣做）；

判斷路由需求許可權是否符合，若不符合直接重定向。

// index.js

router.beforeeach(async (to, from, next) => , false)
if (_userinfo && object.keys(_userinfo).length > 0 &&
to.matched.some(record => record.meta.requireauth)) else if (to.fullpath === '/label/system-setting/theme' &&
!_userinfo.topicadmin) )
} else )
}} else if (!(_userinfo[to.meta.authrole])) )}}
} catch (e) 
next()
})

Vue路由鑑權

router index.js var router export default router newrouter 更多.let indexscrolltop 0router.beforeeach to,from next else else else if to.path document.ti...

vue路由鑑權（動態路由）

乙個系統有多個角色，不同角色登入後應該有不同的路由表，保證使用者亂輸url不會訪問到正確的位址，而是跳轉到404頁面。方法一 在路由資訊的meta中新增擁有當前許可權的角色 routes component import components login.vue component import v...

Vue2路由鑑權

路由導航鉤子做鑑權 router index.js var router export default router new router 更多.let indexscrolltop 0 router.beforeeach to,from,next else else else if to.path...