vue使用動(dòng)態(tài)添加路由(router.addRoutes)加載權(quán)限側(cè)邊欄的方式
工作中我們經(jīng)常會(huì)遇到這種需求，后臺(tái)定義用戶的權(quán)限數(shù)據(jù)，前端進(jìn)行獲取，并渲染在側(cè)邊欄導(dǎo)航上，不同權(quán)限的用戶看到的側(cè)邊欄是不同的。
即前端渲染的數(shù)據(jù)是隨著后臺(tái)的改變而改變的，做到真正的前后端分離。
一、拿到需要?jiǎng)討B(tài)添加的路由表
我們的思路是：
登錄(login，所有人均可見(jiàn))--------->登錄成功，獲取權(quán)限-------->權(quán)限不同，側(cè)邊欄的數(shù)據(jù)展示不同
先定義一份公共的路由表，里面僅有一些公共的路由，如 login
獲取到權(quán)限后，我們根據(jù)權(quán)限，得到需要?jiǎng)討B(tài)添加的路由表，把這份路由表動(dòng)態(tài)添加到router中即可。
通過(guò)查閱網(wǎng)上的資料，論壇等我總結(jié)出了2條方式，分別是前端主導(dǎo)和后臺(tái)主導(dǎo)。
（1）前端主導(dǎo)
何謂前端主導(dǎo)？就是在整個(gè)權(quán)限方面，主體是定義在前端。前端需要提前定義一份完整的路由權(quán)限表，后臺(tái)的作用僅僅是返回當(dāng)前用戶的權(quán)限列表，把獲取到的權(quán)限表比對(duì)完整的權(quán)限表，那么得到一份新的路由權(quán)限表拿去渲染。
這里需要注意的是，為什么不直接把后臺(tái)返回的權(quán)限列表拿去渲染，而是需要通過(guò)比對(duì)，才得出權(quán)限表？
因?yàn)楹笈_(tái)返回的僅僅只是字符串！
我們?cè)谑褂胿ue-router定義路由的時(shí)候，是需要導(dǎo)入該路由對(duì)應(yīng)的component的，如下所示， component是必須引入的，而后臺(tái)返回給我們的數(shù)據(jù)是不會(huì)帶component對(duì)應(yīng)的組件的。
import Login from './views/Login.vue'
let publicRoutes = [
{
path: '/login',
name: 'login',
component: Login
}
]因此我們可以在前端通過(guò)提前定義一份全部的，完整的路由表，把后臺(tái)傳的數(shù)據(jù)當(dāng)參考使用，從而得出一份路由權(quán)限表。
舉個(gè)例子：
在前端定義的完整權(quán)限表：
import Order from './components/orderCompontents/order.vue'
import OrderList from './components/orderCompontents/orderList.vue'
import ProductManage from './components/orderCompontents/productManage.vue'
import ProductionList from './components/orderCompontents/productionList.vue'
import ReviewManage from './components/orderCompontents/reviewManage.vue'
import ReturnGoods from './components/orderCompontents/returnGoods.vue'
const allroutes = [
{
path: '/order',
title: 'order-manage',
component: Order,
meta: {
name: '訂單管理'
},
children: [
{
path: '/order-list',
title: 'order-list',
component: OrderList,
meta: {
name: '訂單列表'
}
},
{
path: '/product',
title: 'product-manage',
component: ProductManage,
meta: {
name: '生產(chǎn)管理'
},
children: [
{
path: '/product-list',
title: 'product-list',
component: ProductionList,
meta: {
name: '生產(chǎn)列表'
}
},
{
path: '/review-manage',
title: 'review-manage',
component: ReviewManage,
meta: {
name: '審核管理'
}
}
]
},
{
path: '/return-goods',
title: 'return-goods',
component: ReturnGoods,
meta: {
name: '退貨管理'
}
}
]
}
]后臺(tái)傳輸過(guò)來(lái)的數(shù)據(jù)：
{
"code": 0,
"message": "獲取權(quán)限成功",
"data": [
{
"name": "訂單管理",
"children": [
{
"name": "訂單列表"
},
{
"name": "生產(chǎn)管理",
"children": [
{
"name": "生產(chǎn)列表"
}
]
},
{
"name": "退貨管理"
}
]
}
]
}我們對(duì)比這兩個(gè)數(shù)據(jù)的name屬性，就能很輕易的過(guò)濾出一份路由權(quán)限表。再通過(guò)router.addRoutes(）動(dòng)態(tài)添加進(jìn)路由即可。
（2）后臺(tái)主導(dǎo)
前面一種方式比較簡(jiǎn)單，前端定義好，后臺(tái)傳過(guò)來(lái)進(jìn)行比對(duì)即可，但是缺點(diǎn)也是很明顯。
如果后臺(tái)傳遞的權(quán)限名稍稍做一些改動(dòng)，那么前端就匹配不到相應(yīng)的路由了。也就是改一個(gè)權(quán)限名，前端后臺(tái)需要一起改。。有點(diǎn)不太符合前后端徹底分離的思想。
我們想要的是，只改后臺(tái)，那么前端會(huì)根據(jù)接收的數(shù)據(jù)自動(dòng)變化！ 怎么解決這個(gè)問(wèn)題呢？ 那就是用后臺(tái)主導(dǎo)思想。
思路如下：
路由表不在前端進(jìn)行比對(duì)，后臺(tái)對(duì)用戶的權(quán)限進(jìn)行比對(duì)，返回給前端一個(gè)比對(duì)好的路由表，且返回的路由表需要有如下字段：
{
"data": {
"router": [
{
"path": "",
"redirect": "/home",
},
{
"path": "/home",
"component": "Home",
"name": "Home",
"meta": {
"title": "首頁(yè)",
"icon": "example"
},
"children": [
{
"path": "/xitong",
"name": "xitong",
"component": "xitong/xitong",
"meta": {
"title": "系統(tǒng)",
"icon": "table"
}
}
]
},
{
"path": "*",
"redirect": "/404",
"hidden": true
}
]
}
}注意其中的component字段，他是字符串，我們需要把這個(gè)字符串轉(zhuǎn)化為我們前端定義的組件！
function filterRouter(routers) { // 遍歷后臺(tái)傳來(lái)的路由字符串，轉(zhuǎn)換為組件對(duì)象
const accessedRouters = routers.filter(route => {
if (route.component) {
if (route.component === 'Home') { // Home組件特殊處理
route.component = Home
} else {
route.component = _import(route.component)
}
}
if (route.children && route.children.length) {
route.children = filterRouter(route.children)
}
return true
})
return accessedRouters
}這個(gè)函數(shù)的主要作用就是把后臺(tái)傳過(guò)來(lái)的字符串型的component轉(zhuǎn)化為真正的組件
其中_import()函數(shù)的定義如下：
function _import (file) {
return () => import('@/components/views/' + file + '.vue')
}通過(guò)異步加載組件，去請(qǐng)求該組件
其中的路徑需要大家根據(jù)自己文件的路徑去修改。
這種方法最重要的一點(diǎn)就是，后臺(tái)傳遞的component實(shí)際存放的是路徑！前端根據(jù)這個(gè)路徑去找到這個(gè)組件并異步加載組件。
最終執(zhí)行結(jié)束后，filterRouter返回的就是一份路由權(quán)限列表，里面的component也有了引用。
這種方法的好處在于，前端的所有權(quán)限路由數(shù)據(jù)都來(lái)自于后臺(tái)，只要路徑不改，后臺(tái)任意修改數(shù)據(jù)，前端均會(huì)自動(dòng)變化。
注意： 如果后臺(tái)修改的是字段 “component ” 的時(shí)候，前端需要修改文件名進(jìn)行配合，若是其他修改前端則均無(wú)需任何更改。
二、渲染數(shù)據(jù)到側(cè)邊欄
通過(guò) （一） 的方式我們可以拿到一份要渲染的路由表，我是存到了vuex中，然后在sideBar頁(yè)面中拿出來(lái)，渲染。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- vue3.0+element Plus實(shí)現(xiàn)頁(yè)面布局側(cè)邊欄菜單路由跳轉(zhuǎn)功能
- Vue3實(shí)現(xiàn)簡(jiǎn)約型側(cè)邊欄的示例代碼
- Vue3點(diǎn)擊側(cè)邊導(dǎo)航欄完成切換頁(yè)面內(nèi)組件全過(guò)程(WEB)
- Vue-element-admin平臺(tái)側(cè)邊欄收縮控制問(wèn)題
- vue框架實(shí)現(xiàn)將側(cè)邊欄完全隱藏
- vue實(shí)現(xiàn)側(cè)邊定位欄
- VuePress 側(cè)邊欄的具體使用
- 如何利用Vue3管理系統(tǒng)實(shí)現(xiàn)動(dòng)態(tài)路由和動(dòng)態(tài)側(cè)邊菜單欄
- vue elementui簡(jiǎn)易側(cè)拉欄的使用小結(jié)
相關(guān)文章
vue template當(dāng)中style背景設(shè)置不編譯問(wèn)題
這篇文章主要介紹了vue template當(dāng)中style背景設(shè)置不編譯問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
keep-alive是Vue提供的一個(gè)抽象組件，用來(lái)對(duì)組件進(jìn)行緩存，從而節(jié)省性能，由于是一個(gè)抽象組件，所以在頁(yè)面渲染完畢后不會(huì)被渲染成一個(gè)DOM元素。這篇文章主要介紹了vue的keep-alive中使用EventBus的方法,需要的朋友可以參考下2019-04-04
vue觸發(fā)真實(shí)的點(diǎn)擊事件跟用戶行為一致問(wèn)題
這篇文章主要介紹了vue觸發(fā)真實(shí)的點(diǎn)擊事件跟用戶行為一致問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue點(diǎn)擊項(xiàng)目唯一id生成器nanoid的使用方式
這篇文章主要介紹了vue點(diǎn)擊項(xiàng)目唯一id生成器nanoid的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這Vue CLI 是一個(gè)基于 Vue.js 進(jìn)行快速開(kāi)發(fā)的完整系統(tǒng)。篇文章主要介紹了vue-cli3腳手架的配置以及使用,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了vue表單驗(yàn)證之禁止input輸入框輸入空格，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vue cli實(shí)現(xiàn)項(xiàng)目登陸頁(yè)面流程詳解
CLI是一個(gè)全局安裝的npm包，提供了終端里的vue命令。它可以通過(guò)vue create快速搭建一個(gè)新項(xiàng)目，或者直接通過(guò)vue serve構(gòu)建新想法的原型。你也可以通過(guò)vue ui通過(guò)一套圖形化界面管理你的所有項(xiàng)目2022-10-10
vue3組件的v-model:value與v-model的區(qū)別解析
在Vue3中,v-model和v-model:value都是用于實(shí)現(xiàn)雙向數(shù)據(jù)綁定的語(yǔ)法糖,但v-model:value提供了更顯式和靈活的綁定方式,允許你明確指定綁定的屬性名和事件名,它們的主要區(qū)別在于默認(rèn)行為、靈活性、多模型綁定和使用場(chǎng)景,感興趣的朋友一起看看吧2025-02-02
vue-element-admin中node-sass換成dart-sass,安裝依賴報(bào)code?128多種問(wèn)題的解決
這篇文章主要介紹了vue-element-admin中node-sass換成dart-sass,安裝依賴報(bào)code?128多種問(wèn)題的解決方法,本文給大家分享問(wèn)題原因分析及解決方法，需要的朋友可以參考下2023-02-02
vue3的setup語(yǔ)法如何自定義v-model為公用hooks
這篇文章主要介紹了vue3的setup語(yǔ)法如何自定義v-model為公用hooks，文章分為兩個(gè)部分介紹，簡(jiǎn)單介紹vue3的setup語(yǔ)法如何自定義v-model和如何提取v-model語(yǔ)法作為一個(gè)公用hooks2022-07-07