vue路由鑑權（動態路由）

乙個系統有多個角色，不同角色登入後應該有不同的路由表，保證使用者亂輸url不會訪問到正確的位址，而是跳轉到404頁面。

方法一：在路由資訊的meta中新增擁有當前許可權的角色

routes: [

, component: () => import('../components/login.vue')
},, component: () => import('../views/home.vue')
},]

然後在router.beforeeach中控制路由是否展示

//假設有兩種角色：admin 和 user 

//從後台獲取的使用者角色
const role = 'user'
//當進入乙個頁面是會觸發導航守衛 router.beforeeach 事件
router.beforeeach((to,from,next)=>esle) //跳到404頁面
}})

方法二：route.js中預設只有login和register的頁面路由，其餘路由都是通過vue-router的addrouter來新增的，需要注意的是，動態新增路由是在路由表中 push 路由，由於路由是按順序匹配的，因此需要將諸如404頁面這樣的路由放在動態新增的最後。

// store.js

// 將需要動態註冊的路由提取到vuex中
const dynamicroutes = [
, component: () => import('./views/manage')
}, ,
component: () => import('./views/usercenter')
}]

在 vuex 中新增 userroutes 陣列用於儲存使用者的定製選單。在setuserinfo中根據後端返回的選單生成使用者的路由表。

// store.js

setuserinfo (state, userinfo) )
router.addroutes(state.userroutes) // 註冊路由
}

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 router 路由鑑權（非動態路由）

實際系統中還有幾種管理員，此處略去，以精簡描述。原本想用動態路由的思路去做，按許可權載入對應路由表，但是由於許可權可以交叉 比如乙個人可以同時是主題管理員和資料服務管理員 導致許可權路由表還是得去做判斷組合。於是放棄了這個思路，索性就在beforeeach裡直接判斷了。路由概覽 index.js i...

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...