原文地址前端路上，轉(zhuǎn)載請(qǐng)注明出處
之前在基于Vue實(shí)現(xiàn)后臺(tái)系統(tǒng)權(quán)限控制一文中提到路由權(quán)限的實(shí)現(xiàn)思路赊豌，因?yàn)椴幌矚g在每次路由跳轉(zhuǎn)的before鉤子里做判斷等恐，所以在初始化Vue實(shí)例前對(duì)路由做了篩選吝秕，再用實(shí)際路由初始化Vue實(shí)例泊脐，代價(jià)是登錄頁(yè)需要從Vue實(shí)例中獨(dú)立出來，實(shí)現(xiàn)上倒沒什么問題烁峭，不過這種做法需要在登錄和首頁(yè)之間通過url跳轉(zhuǎn)容客，感覺總是不太"優(yōu)雅"，實(shí)際上只要能在登錄后動(dòng)態(tài)修改當(dāng)前實(shí)例的路由就行了则剃，之前確實(shí)沒辦法耘柱，但vue-router 2.2版本新增了一個(gè)router.addRoutes(routes)方法，讓動(dòng)態(tài)路由得以實(shí)現(xiàn)棍现。
想當(dāng)然的實(shí)現(xiàn)方案
用動(dòng)態(tài)路由實(shí)現(xiàn)路由權(quán)限控制貌似是一個(gè)完美的方案调煎，初始路由只有登錄和404，登錄后動(dòng)態(tài)添加可用路由己肮，同時(shí)將菜單數(shù)據(jù)保存到Vuex或本地用于實(shí)現(xiàn)動(dòng)態(tài)菜單士袄，關(guān)鍵節(jié)點(diǎn)大致如下：
//初始路由：
[{
path: '/login',
name: 'login',
component: (resolve) => require(['../views/common/404.vue'], resolve)
}, {
path: '/404',
name: '404',
component: (resolve) => require(['../views/common/404.vue'], resolve)
}, {
path: '*',
redirect: '/404'
}]
//登錄邏輯
let vm = this;
axios.get('/login', vm.user).then((res) => {
let extendsRoutes = filterRoutes(res.menus);
<!--
//假設(shè)得到的可用路由如下
[{
path: '/',
name: '首頁(yè)',
component: (resolve) => require(['../views/index.vue'], resolve),
children: [{
path: '/menus',
name: '菜單管理',
component: (resolve) => require(['../views/menus.vue'], resolve)
}, {
path: '/resources',
name: '資源管理',
component: (resolve) => require(['../views/resources.vue'], resolve)
}]
}]-->
//存菜單
sessionStorage.setItem('menus',JSON.stringify(extendsRoutes[0].children));
//動(dòng)態(tài)添加路由
vm.$router.addRoutes(extendsRoutes);
//跳轉(zhuǎn)到應(yīng)用界面
vm.$router.push({path:'/'});
})
//首頁(yè)獲取菜單數(shù)據(jù)
this.menus = JSON.parse(sessionStorage.getItem('menus'));
//用此數(shù)據(jù)循環(huán)菜單
..
目前為止看上去一切順利，然而前方有坑谎僻。
動(dòng)態(tài)路由的坑
第一個(gè)坑是娄柳，如果你將這套邏輯實(shí)現(xiàn)之后會(huì)發(fā)現(xiàn)打開應(yīng)用看到的第一個(gè)頁(yè)面是404，這是因?yàn)閱?dòng)服務(wù)后將默認(rèn)打開首頁(yè)'/'艘绍，然而初始路由中沒有這個(gè)路徑赤拒，因此根據(jù)路由規(guī)則跳轉(zhuǎn)到了404。我們希望結(jié)果當(dāng)然是跳轉(zhuǎn)到'/login'诱鞠，因此需要對(duì)這種情況做判斷挎挖，在用戶登錄之前所有請(qǐng)求都要指向'/login'，這個(gè)判斷可以在before鉤子里做也可以在根組件里做航夺，建議做在根組件的created回調(diào)里蕉朵，核心代碼大概這樣：
let isLogin = sessionStorage.getItem('user');
if(!isLogin){
return this.$router.push({path:'/login'});
}
這時(shí)候已經(jīng)可以順利登錄了敌蜂，登錄后很快就會(huì)發(fā)現(xiàn)第二個(gè)坑想鹰，手動(dòng)刷新頁(yè)面又會(huì)跳到404认烁，這是因?yàn)樗⑿聲?huì)導(dǎo)致Vue重新實(shí)例化巡球，路由也恢復(fù)到了初始路由咐蝇，于是當(dāng)前路徑又被重定向到了404遥缕，這個(gè)問題的根源是可用路由沒有實(shí)現(xiàn)持久化核无，那么可以通過將路由數(shù)據(jù)存sessionStorage來解決平痰，實(shí)例化之前如果檢測(cè)到本地路由就直接合并路由，像這樣：
//檢測(cè)本地路由
let localRoutes = sessionStorage.getItem('routes');
if(localRoutes){
router.addRoutes(JSON.parse(localRoutes));
}
//實(shí)例化
new Vue({
el: '#app',
router,
render: h => h(App)
});
理論上可以蛉拙，但實(shí)際操作要遠(yuǎn)比上述代碼復(fù)雜尸闸，因?yàn)榇嬖诒镜氐闹荒苁菣?quán)限數(shù)據(jù)而不是真實(shí)路由，路由在存孕锄、取之前都要先根據(jù)權(quán)限匹配獲得，過程還是挺繁瑣的苞尝，而且必須依賴sessionStorage這種持久存儲(chǔ)畸肆，沒有其他方法。問題就出在這個(gè)sessionStorage上宙址，原則上權(quán)限只能在內(nèi)存變量中流轉(zhuǎn)轴脐，不能直接暴露到用戶可操作的地方，試想只要用戶手動(dòng)修改了sessionStorage里的權(quán)限抡砂，再刷新一下頁(yè)面就能突破前端路由控制了大咱，非常的不靠譜。
改進(jìn)方案
既然不能存本地注益，那就每次刷新都重新從服務(wù)端獲取碴巾，所以改進(jìn)后的方案是本地存用戶token，每次刷新要憑token從服務(wù)端重新獲取用戶信息和權(quán)限丑搔，然后動(dòng)態(tài)更新路由厦瓢，獲取權(quán)限操作可以跟登錄檢測(cè)一起放在根組件的created回調(diào)中進(jìn)行，確保訪問任何路徑都會(huì)先執(zhí)行這一步啤月，但因?yàn)楂@取權(quán)限是異步操作煮仇，在此之前仍然會(huì)經(jīng)過應(yīng)用初始化，所以還是會(huì)遇到404的問題谎仲，為此我們只需做一個(gè)小調(diào)整浙垫，將不匹配路徑('*')跳404的路由從初始路由中移除，動(dòng)態(tài)更新路由時(shí)再把這個(gè)配置加進(jìn)去郑诺，如下：
let userPath = ...//我們的動(dòng)態(tài)路由
//注入時(shí)拼接404處理路由
this.$router.addRoutes(userPath.concat([{
path: '*',
redirect: '/404'
}]));
這樣就解決了刷新問題夹姥，后面還有幾個(gè)小問題就簡(jiǎn)單了。
首先是菜單间景，之前通過$router.options.routes訪問路由數(shù)據(jù)實(shí)現(xiàn)動(dòng)態(tài)菜單佃声，但這個(gè)數(shù)據(jù)不是響應(yīng)式的，無法追蹤動(dòng)態(tài)路由的變化倘要，因此我們需要將得到的導(dǎo)航菜單數(shù)據(jù)存到sessionStorage或Vuex里實(shí)現(xiàn)數(shù)據(jù)共享圾亏。
資源權(quán)限控制也受到很大的影響十拣，實(shí)現(xiàn)較為細(xì)致的權(quán)限控制需要一個(gè)自定義權(quán)限驗(yàn)證指令和一個(gè)全局驗(yàn)證方法，之前的方案里權(quán)限是在Vue實(shí)例化之前獲取的志鹃，所以可以很方便的拿到權(quán)限后實(shí)現(xiàn)驗(yàn)證方法夭问，然后用驗(yàn)證方法實(shí)現(xiàn)自定義指令，再將方法全局混合進(jìn)Vue曹铃，然后實(shí)例化缰趋，這樣實(shí)例中的 所有組件都可以使用自定義指令和驗(yàn)證方法；但現(xiàn)在的方案是先實(shí)例化再獲取權(quán)限陕见，實(shí)例化之前根本沒有權(quán)限數(shù)據(jù)秘血，所以自定義指無法實(shí)現(xiàn)，等拿到權(quán)限后實(shí)現(xiàn)了驗(yàn)證方法评甜，卻無法再全局混合了灰粮。
這個(gè)問題最后也解決了，但解決方案就徹底的"有辱斯文"了忍坷，首先是全局方法的實(shí)現(xiàn)粘舟，直接這么做:
Vue.prototype.has = function(){
...
}
使用方式跟全局混合的方法完全一樣。
自定義指令的實(shí)現(xiàn)本來很頭疼佩研，因?yàn)槿种噶钪荒茉趯?shí)例化之前實(shí)現(xiàn)柑肴，但那時(shí)候又確實(shí)沒有權(quán)限，不過既然驗(yàn)證方法這么做的話旬薯，指令倒是也順便解決了晰骑，像這樣：
//權(quán)限指令
Vue.directive('has', {
bind: function(el, binding) {
if (!Vue.prototype.has(binding.value)) {
el.parentNode.removeChild(el);
}
}
});
神奇的prototype貌似自帶惰性效果，可以先注冊(cè)后實(shí)現(xiàn)袍暴，具體原因我也不太明白些侍，如過有大牛路過，希望能留下答案政模。
后記
生命不息岗宣，折騰不止啊，本來已經(jīng)放棄的思路淋样，捋著捋著竟然捋順了耗式，然后又花了大半天把原來多入口的項(xiàng)目改成了單入口，雖然麻煩了一頓趁猴，但心里總算舒坦了刊咳。
