之前在基于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ú)立出來(lái)，實(shí)現(xiàn)上倒沒(méi)什么問(wèn)題，不過(guò)這種做法需要在登錄和首頁(yè)之間通過(guò)url跳轉(zhuǎn)，感覺(jué)總是不太”優(yōu)雅”，實(shí)際上只要能在登錄后動(dòng)態(tài)修改當(dāng)前實(shí)例的路由就行了，之前確實(shí)沒(méi)辦法，但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)打開(kāi)應(yīng)用看到的第一個(gè)頁(yè)面是404，這是因?yàn)閱?dòng)服務(wù)后將默認(rèn)打開(kāi)首頁(yè)'/‘，然而初始路由中沒(méi)有這個(gè)路徑，因此根據(jù)路由規(guī)則跳轉(zhuǎn)到了404。我們希望結(jié)果當(dāng)然是跳轉(zhuǎn)到'/login'，因此需要對(duì)這種情況做判斷，在用戶(hù)登錄之前所有請(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è)問(wèn)題的根源是可用路由沒(méi)有實(shí)現(xiàn)持久化，那么可以通過(guò)將路由數(shù)據(jù)存sessionStorage來(lái)解決，實(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)限匹配獲得，過(guò)程還是挺繁瑣的，而且必須依賴(lài)sessionStorage這種持久存儲(chǔ)，沒(méi)有其他方法。問(wèn)題就出在這個(gè)sessionStorage上，原則上權(quán)限只能在內(nèi)存變量中流轉(zhuǎn)，不能直接暴露到用戶(hù)可操作的地方，試想只要用戶(hù)手動(dòng)修改了sessionStorage里的權(quán)限，再刷新一下頁(yè)面就能突破前端路由控制了，非常的不靠譜。

改進(jìn)方案

既然不能存本地，那就每次刷新都重新從服務(wù)端獲取，所以改進(jìn)后的方案是本地存用戶(hù)token，每次刷新要憑token從服務(wù)端重新獲取用戶(hù)信息和權(quán)限，然后動(dòng)態(tài)更新路由，獲取權(quán)限操作可以跟登錄檢測(cè)一起放在根組件的created回調(diào)中進(jìn)行，確保訪(fǎng)問(wèn)任何路徑都會(huì)先執(zhí)行這一步，但因?yàn)楂@取權(quán)限是異步操作，在此之前仍然會(huì)經(jīng)過(guò)應(yīng)用初始化，所以還是會(huì)遇到404的問(wèn)題，為此我們只需做一個(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'
}]));

這樣就解決了刷新問(wèn)題，后面還有幾個(gè)小問(wèn)題就簡(jiǎn)單了。

首先是菜單，之前通過(guò)$router.options.routes訪(fǎng)問(wèn)路由數(shù)據(jù)實(shí)現(xiàn)動(dòng)態(tài)菜單，但這個(gè)數(shù)據(jù)不是響應(yīng)式的，無(wú)法追蹤動(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í)例化之前根本沒(méi)有權(quán)限數(shù)據(jù)，所以自定義指無(wú)法實(shí)現(xiàn)，等拿到權(quán)限后實(shí)現(xiàn)了驗(yàn)證方法，卻無(wú)法再全局混合了。

這個(gè)問(wèn)題最后也解決了，但解決方案就徹底的”有辱斯文”了，首先是全局方法的實(shí)現(xiàn)，直接這么做:

Vue.prototype.has = function(){
  ...
}

使用方式跟全局混合的方法完全一樣。

自定義指令的實(shí)現(xiàn)本來(lái)很頭疼，因?yàn)槿种噶钪荒茉趯?shí)例化之前實(shí)現(xiàn)，但那時(shí)候又確實(shí)沒(méi)有權(quán)限，不過(guò)既然驗(yàn)證方法這么做的話(huà)，指令倒是也順便解決了，像這樣：

//權(quán)限指令
Vue.directive('has', {
 bind: function(el, binding) {
  if (!Vue.prototype.has(binding.value)) {
   el.parentNode.removeChild(el);
  }
 }
});

神奇的prototype貌似自帶惰性效果，可以先注冊(cè)后實(shí)現(xiàn)，具體原因我也不太明白，如過(guò)有大牛路過(guò)，希望能留下答案。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論