在中后臺(tái)應(yīng)用系統(tǒng)開(kāi)發(fā)中，大部分情況下會(huì)涉及到用戶(hù)權(quán)限控制，除了后端做權(quán)限驗(yàn)證外，前端在用戶(hù)訪(fǎng)問(wèn)時(shí)也需要基于用戶(hù)權(quán)限做相應(yīng)控制。針對(duì)前端使用vue框架的情況，對(duì)頁(yè)面一級(jí)的權(quán)限控制，常規(guī)處理是在頁(yè)面導(dǎo)航欄通過(guò)控制導(dǎo)航顯隱控制權(quán)限，但在瀏覽器地址欄輸入訪(fǎng)問(wèn)路徑依然可以訪(fǎng)問(wèn)，可以用vue-router的動(dòng)態(tài)路由來(lái)實(shí)現(xiàn)權(quán)限控制。
//?router.js
import?Vue?from?'vue'
import?Router?from?'vue-router'
Vue.use(Router)
//?默認(rèn)路由只配置無(wú)需權(quán)限的頁(yè)面
const?createRouter?=?()?=>? new?Router({
??mode:?'history',
??base:?process.env.BASE_URL,
??routes:?[
????{
??????path:?'/',
??????redirect:?'/user/login'
????},
????{
??????path:?'/user/login',
??????name:?'login',
??????component:?()?=>?import('@/views/user/Login.vue')
????}
??]
})
const?router?=?createRouter();
export?function?resetRouter()?{?
????const?newRouter?=?createRouter();
????router.matcher?=?newRouter.matcher;
}
export?default?router;
登錄成功后通過(guò)addRoutes更新路由配置
import?routeConfig?from?'@/routeConfig'
this.$api.user.login({
??username,
??password
}).then(res?=>?{
??if(res.data.code?===?0)?{
????//?登錄成功，根據(jù)返回權(quán)限碼配置動(dòng)態(tài)路由
????let?router?=?routeConfig();
????router.routes.forEach(route?=>?this.$router.options.routes.push(route));
????//?必須將路由push到options中才生效
????this.$router.addRoutes(router.routes);
??}
})
正常情況下這樣就可以實(shí)現(xiàn)動(dòng)態(tài)路由控制了，但刷新頁(yè)面發(fā)現(xiàn)會(huì)出現(xiàn)404，因?yàn)樗⑿聲r(shí)vue實(shí)例重新初始化了，導(dǎo)致動(dòng)態(tài)路由被還原成默認(rèn)路由，此時(shí)需要將權(quán)限碼存儲(chǔ)在本地，在main.js中根據(jù)權(quán)限碼重新生成動(dòng)態(tài)路由
//?刷新頁(yè)面時(shí)根據(jù)本地緩存重新生成路由
if(sessionStorage.getItem('permission'))?{
??let?routerData?=?routeConfig();
??routerData.routes.forEach(route?=>?router.options.routes.push(route));
??router.addRoutes(routerData.routes);
}
以上步驟基本可以實(shí)現(xiàn)動(dòng)態(tài)添加路由并在刷新頁(yè)面是維持路由狀態(tài)，但訪(fǎng)問(wèn)根路徑會(huì)始終跳轉(zhuǎn)到登錄頁(yè)，無(wú)法默認(rèn)跳轉(zhuǎn)到首頁(yè)，這個(gè)問(wèn)題目前還未想到好的解決方案。
