vue iview 動態路由和許可權驗證

github上關於vue動態新增路由的例子很多，本專案參考了部分專案後，在iview框架基礎上完成了動態路由的動態新增和選單重新整理。為了幫助其他需要的朋友，現分享出實現邏輯，歡迎一起交流學習。

iview-dynamicrouter

客戶端從服務端拿到路由和許可權資料後，重新整理專案的路由和選單列表，並進行許可權控制。

許可權驗證：許可權驗證參考了vue + elementui 手擼後台管理**基本框架 (二) 許可權控制中實現思路和部分**。

動態路由控制載入

一般來說，動態路由控制分為兩種：一種是將所有路由資料儲存在本地檔案中，然後從服務端獲取使用者的許可權資訊，在路由跳轉時，新增許可權判斷鉤子，如果使用者前往的頁面不在許可權列表內，則禁止跳轉。另一種則是本地只儲存基本路由，如錯誤處理頁面、無許可權控制頁面等，而許可權路由則從伺服器獲取，伺服器根據使用者的許可權下發相應的路由資料，客戶端利用這些資料進行路由的動態生成和新增，本文採用的是第二種方法。

iview-admin專案將路由分為三種：

不作為main元件的子頁面展示的頁面路由，例如login、404、403等錯誤頁面路由；

作為main元件的子頁面展示但是不在左側選單顯示的路由otherrouter，比如首頁路由；

需要特別注意的是，如果404頁面為靜態路由，那麼第一次進入頁面時，這時動態路由還未載入，找不到路由位址會預設跳轉到404錯誤頁，體驗很差，所以404路由先不寫入路由規則中，和動態路由一起載入。

主要**實現如下：

資料請求及路由節點生成


//生成路由
util.initrouter = function (vm) ,
component: 'error-page/404'
}];// 模擬非同步請求
util.ajax('menu.json').then(res => );
};//生成路由節點
util.initrouternode = function (routers, data) , item);
menu.component = lazyloading(menu.component);
if (item.children && item.children.length > 0) 
//新增許可權判斷
meta.permission = menu.permission ? menu.permission : null;
//新增標題
meta.title = menu.title ? menu.title : null;
menu.meta = meta;
}};

動態載入元件


export default (url) =>()=>import(`@/views/$.vue`)

store快取實現

// 動態新增主介面路由，需要快取

state.routers.push(...routes);

router.addroutes(routes);

},// 動態新增全域性路由，不需要快取

updatedefaultrouter (state, routes) ,

// 接受前台陣列，重新整理選單

updatemenulist (state, routes)

最後在main.js中進行呼叫


mounted ()

許可權控制

同動態路由實現方法類似，操作許可權控制也一般也分為兩種，第一種是頁面顯示時不控制許可權，所有的操作，比如按鈕全部展現，然後在操作發起時，進行許可權判斷，如果使用者擁有該操作的許可權，則通過，否則提醒使用者無許可權，第二種則是在頁面載入的時候，就進行許可權判斷，無許可權的操作不進行顯示。本人更喜歡第二種方法，這樣不會對使用者進行誤導，個人認為使用者看到的應該就行可操作的，不然點下按鈕再提示無許可權的感覺一定很不爽。

本專案的思路**見參考博文，原博主的具體思路是：在路由結構的meta欄位中，新增使用者操作許可權列表，然後註冊全域性指令，當節點初次渲染時，判斷該頁面是否存在許可權，如果存在，並且傳入的引數不在許可權列表中，則直接刪除該節點。

主要**實現如下：

在路由資料中新增permission字段，存放許可權列表

模擬非同步請求資料
[  ,
...]
}]

在遍歷生成路由節點時，將permission字段資料存入路由節點meta屬性中


//生成路由節點
util.initrouternode = function (routers, data) 
};

定義全域性命令元件，讀取路由permission屬性值獲得許可權列表，如果該不許可權在許可權列表中，則刪除節點


const haspermission = 
}});
}};export default haspermission;

許可權元件使用示例：

新增修改

刪除

全域性註冊元件

// main.js
import haspermission from '@/libs/haspermission.js';
vue.use(haspermission);

在我看來，頁面標籤和麵包屑都屬於系統中錦上添花的頁面相關控制項，提高頁面管理的便捷性，在iview官方admin專案中已經實現了這兩個元件。所以這個專案中，只是將其進行移植，實現了元件功能，沒有深入了解，感興趣的可以仔細研究。

email:[email protected]

vue iview 動態路由和許可權驗證

路由靜態路由和動態路由

Vue iview 動態顯示表頭資訊

vue iview框架實現左側動態選單

vue iview 動態路由和許可權驗證

路由 靜態路由和動態路由

Vue iview 動態顯示表頭資訊

vue iview框架實現左側動態選單

相關推薦

路由靜態路由和動態路由