您好,登錄后才能下訂單哦!
怎么在vue 中利用iview實(shí)現(xiàn)動(dòng)態(tài)路由和權(quán)限驗(yàn)證功能?相信很多沒有經(jīng)驗(yàn)的人對此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個(gè)問題。
項(xiàng)目基礎(chǔ)
基礎(chǔ)框架: iview組件庫官方模板項(xiàng)目 iview-admin 的template分支項(xiàng)目,此項(xiàng)目為 iview-admin 的基礎(chǔ)框架代碼。項(xiàng)目地址:iview-admin
實(shí)現(xiàn)邏輯
動(dòng)態(tài)路由控制加載
一般來說,動(dòng)態(tài)路由控制分為兩種:一種是將所有路由數(shù)據(jù)存儲(chǔ)在本地文件中,然后從服務(wù)端獲取用戶的權(quán)限信息,在路由跳轉(zhuǎn)時(shí),添加權(quán)限判斷鉤子,如果用戶前往的頁面不在權(quán)限列表內(nèi),則禁止跳轉(zhuǎn)。另一種則是本地只存儲(chǔ)基本路由,如錯(cuò)誤處理頁面、無權(quán)限控制頁面等,而權(quán)限路由則從服務(wù)器獲取,服務(wù)器根據(jù)用戶的權(quán)限下發(fā)相應(yīng)的路由數(shù)據(jù),客戶端利用這些數(shù)據(jù)進(jìn)行路由的動(dòng)態(tài)生成和添加,本文采用的是第二種方法。
iview-admin項(xiàng)目將路由分為三種:
不作為Main組件的子頁面展示的頁面路由,例如login、404、403等錯(cuò)誤頁面路由;
作為Main組件的子頁面展示但是不在左側(cè)菜單顯示的路由 otherRouter ,比如首頁路由;
作為Main組件的子頁面展示并且在左側(cè)菜單顯示的路由 appRouter ;
拿到路由數(shù)據(jù)后,我們主要進(jìn)行兩部分操作,第一部分是遍歷數(shù)據(jù),利用組件異步加載的方法,加載每個(gè)路由節(jié)點(diǎn)對應(yīng)的組件,之后利用 router.addRoutes(routes)
完成路由列表的動(dòng)態(tài)添加;第二部分是因?yàn)?code> iview-admin 框架下的頁面標(biāo)簽和面包屑導(dǎo)航,需要遍歷appRouter獲取路由信息,所以我們也需要將路由數(shù)據(jù)存入 vuex ,以便全局訪問。
需要特別注意的是,如果404頁面為靜態(tài)路由,那么第一次進(jìn)入頁面時(shí),這時(shí)動(dòng)態(tài)路由還未加載,找不到路由地址會(huì)默認(rèn)跳轉(zhuǎn)到404錯(cuò)誤頁,體驗(yàn)很差,所以404路由先不寫入路由規(guī)則中,和動(dòng)態(tài)路由一起加載。
主要代碼實(shí)現(xiàn)如下:
數(shù)據(jù)請求及路由節(jié)點(diǎn)生成
//util.js //生成路由 util.initRouter = function (vm) { const constRoutes = []; const otherRoutes = []; // 404路由需要和動(dòng)態(tài)路由一起注入 const otherRouter = [{ path: '/*', name: 'error-404', meta: { title: '404-頁面不存在' }, component: 'error-page/404' }]; // 模擬異步請求 util.ajax('menu.json').then(res => { var menuData = res.data; util.initRouterNode(constRoutes, menuData); util.initRouterNode(otherRoutes, otherRouter); // 添加主界面路由 vm.$store.commit('updateAppRouter', constRoutes.filter(item => item.children.length > 0)); // 添加全局路由 vm.$store.commit('updateDefaultRouter', otherRoutes); // 刷新界面菜單 vm.$store.commit('updateMenulist', constRoutes.filter(item => item.children.length > 0)); }); }; //生成路由節(jié)點(diǎn) util.initRouterNode = function (routers, data) { for (var item of data) { let menu = Object.assign({}, item); menu.component = lazyLoading(menu.component); if (item.children && item.children.length > 0) { menu.children = []; util.initRouterNode(menu.children, item.children); } //添加權(quán)限判斷 meta.permission = menu.permission ? menu.permission : null; //添加標(biāo)題 meta.title = menu.title ? menu.title : null; menu.meta = meta; } };
動(dòng)態(tài)加載組件
//lazyLoading.js export default (url) =>()=>import(`@/views/${url}.vue`) Store緩存實(shí)現(xiàn) //app.js // 動(dòng)態(tài)添加主界面路由,需要緩存 updateAppRouter (state, routes) { state.routers.push(...routes); router.addRoutes(routes); }, // 動(dòng)態(tài)添加全局路由,不需要緩存 updateDefaultRouter (state, routes) { router.addRoutes(routes); }, // 接受前臺(tái)數(shù)組,刷新菜單 updateMenulist (state, routes) { state.menuList = routes; }
最后在main.js中進(jìn)行調(diào)用
//main.js mounted () { // 調(diào)用方法,動(dòng)態(tài)生成路由 util.initRouter(this); }
權(quán)限控制
同動(dòng)態(tài)路由實(shí)現(xiàn)方法類似,操作權(quán)限控制也一般也分為兩種,第一種是頁面顯示時(shí)不控制權(quán)限,所有的操作,比如按鈕全部展現(xiàn),然后在操作發(fā)起時(shí),進(jìn)行權(quán)限判斷,如果用戶擁有該操作的權(quán)限,則通過,否則提醒用戶無權(quán)限,第二種則是在頁面加載的時(shí)候,就進(jìn)行權(quán)限判斷,無權(quán)限的操作不進(jìn)行顯示。本人更喜歡第二種方法,這樣不會(huì)對用戶進(jìn)行誤導(dǎo),個(gè)人認(rèn)為用戶看到的應(yīng)該就行可操作的,不然點(diǎn)下按鈕再提示無權(quán)限的感覺一定很不爽。
本項(xiàng)目的思路來源見參考博文,原博主的具體思路是:在路由結(jié)構(gòu)的meta字段中,添加用戶操作權(quán)限列表,然后注冊全局指令,當(dāng)節(jié)點(diǎn)初次渲染時(shí),判斷該頁面是否存在權(quán)限,如果存在,并且傳入的參數(shù)不在權(quán)限列表中,則直接刪除該節(jié)點(diǎn)。
主要代碼實(shí)現(xiàn)如下:
在路由數(shù)據(jù)中添加 permission 字段,存放權(quán)限列表
//menu.json,模擬異步請求數(shù)據(jù) [ { "path": "/groupOne", "icon": "ios-folder", "name": "system_index", "title": "groupOne", "component": "Main", "children": [ { "path": "pageOne", "icon": "ios-paper-outline", "name": "pageOne", "title": "pageOne", "component": "group/page1/page1", "permission":["del"] }, ... ] } ]
在遍歷生成路由節(jié)點(diǎn)時(shí),將 permission 字段數(shù)據(jù)存入路由節(jié)點(diǎn) meta 屬性中
//util.js //生成路由節(jié)點(diǎn) util.initRouterNode = function (routers, data) { for (var item of data) { .... //添加權(quán)限判斷 meta.permission = menu.permission ? menu.permission : null; ... } };
定義全局命令組件,讀取路由 permission 屬性值獲得權(quán)限列表,如果該不權(quán)限在權(quán)限列表中,則刪除節(jié)點(diǎn)
//hasPermission.js const hasPermission = { install (Vue, options) { Vue.directive('hasPermission', { bind (el, binding, vnode) { let permissionList = vnode.context.$route.meta.permission; if (permissionList && permissionList.length && !permissionList.includes(binding.value)) { el.parentNode.removeChild(el); } } }); } }; export default hasPermission;
權(quán)限組件使用示例:
<template> <div> <h2>page1</h2> <Button v-hasPermission="'add'">添加</Button> <Button v-hasPermission="'edit'">修改</Button> <Button v-hasPermission="'del'">刪除</Button> </div> </template>
全局注冊組件
// main.js import hasPermission from '@/libs/hasPermission.js'; Vue.use(hasPermission);
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架,Vue與其它大型框架的區(qū)別是,使用Vue可以自底向上逐層應(yīng)用,其核心庫只關(guān)注視圖層,方便與第三方庫和項(xiàng)目整合,且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。
看完上述內(nèi)容,你們掌握怎么在vue 中利用iview實(shí)現(xiàn)動(dòng)態(tài)路由和權(quán)限驗(yàn)證功能的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。