vue中使用動態添加路由(router.addRoutes)加載權限側邊欄的兩種方式

版權聲明：本文爲博主原創文章，遵循 CC 4.0 by-sa 版權協議，轉載請附上原文出處連接和本聲明。
本文連接：https://blog.csdn.net/qq_31906983/article/details/89054798
工做中咱們常常會遇到這種需求，後臺定義用戶的權限數據，前端進行獲取，並渲染在側邊欄導航上，不一樣權限的用戶看到的側邊欄是不一樣的。即前端渲染的數據是隨着後臺的改變而改變的，作到真正的先後端分離。

1、拿到須要動態添加的路由表
咱們的思路是：

登陸(login，全部人都可見)--------->登陸成功，獲取權限-------->權限不一樣，側邊欄的數據展現不一樣

先定義一份公共的路由表，裏面僅有一些公共的路由，如 login

獲取到權限後，咱們根據權限，獲得須要動態添加的路由表，把這份路由表動態添加到router中便可。

經過查閱網上的資料，論壇等我總結出了2條方式，分別是前端主導和後臺主導。

（1）前端主導

何謂前端主導？就是在整個權限方面，主體是定義在前端。前端須要提早定義一份完整的路由權限表，後臺的做用僅僅是返回當前用戶的權限列表，把獲取到的權限表比對完整的權限表，那麼獲得一份新的路由權限表拿去渲染。

這裏須要注意的是，爲何不直接把後臺返回的權限列表拿去渲染，而是須要經過比對，才得出權限表？

由於後臺返回的僅僅只是字符串！

咱們在使用vue-router定義路由的時候，是須要導入該路由對應的component的，以下所示， component是必須引入的，然後臺返回給咱們的數據是不會帶component對應的組件的。

import Login from './views/Login.vue'

let publicRoutes = [
{
path: '/login',
name: 'login',
component: Login
}
]
所以咱們能夠在前端經過提早定義一份所有的，完整的路由表，把後臺傳的數據當參考使用，從而得出一份路由權限表。

舉個例子：

在前端定義的完整權限表：

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: '生產管理'
},
children: [
{
path: '/product-list',
title: 'product-list',
component: ProductionList,
meta: {
name: '生產列表'
}
},
{
path: '/review-manage',
title: 'review-manage',
component: ReviewManage,
meta: {
name: '審覈管理'
}
}
]
},
{
path: '/return-goods',
title: 'return-goods',
component: ReturnGoods,
meta: {
name: '退貨管理'
}
}
]
}
]
後臺傳輸過來的數據：

{
"code": 0,
"message": "獲取權限成功",
"data": [
{
"name": "訂單管理",
"children": [
{
"name": "訂單列表"
},
{
"name": "生產管理",
"children": [
{
"name": "生產列表"
}
]
},
{
"name": "退貨管理"
}
]
}
]
}
咱們對比這兩個數據的name屬性，就能很輕易的過濾出一份路由權限表。再經過router.addRoutes(）動態添加進路由便可。

（2）後臺主導

前面一種方式比較簡單，前端定義好，後臺傳過來進行比對便可，可是缺點也是很明顯。若是後臺傳遞的權限名稍稍作一些改動，那麼前端就匹配不到相應的路由了。也就是改一個權限名，前端後臺須要一塊兒改。。有點不太符合先後端完全分離的思想。咱們想要的是，只改後臺，那麼前端會根據接收的數據自動變化！ 哈哈哈，怎麼解決這個問題呢？ 那就是用後臺主導思想。

思路以下：

路由表不在前端進行比對，後臺對用戶的權限進行比對，返回給前端一個比對好的路由表，且返回的路由表須要有以下字段：

{
"data": {
"router": [
{
"path": "",
"redirect": "/home",
},
{
"path": "/home",
"component": "Home",
"name": "Home",
"meta": {
"title": "首頁",
"icon": "example"
},
"children": [
{
"path": "/xitong",
"name": "xitong",
"component": "xitong/xitong",
"meta": {
"title": "系統",
"icon": "table"
}
}
]
},
{
"path": "*",
"redirect": "/404",
"hidden": true
}
]
}
}
注意其中的component字段，他是字符串，咱們須要把這個字符串轉化爲咱們前端定義的組件！

function filterRouter(routers) { // 遍歷後臺傳來的路由字符串，轉換爲組件對象
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
}
這個函數的主要做用就是把後臺傳過來的字符串型的component轉化爲真正的組件

其中_import()函數的定義以下：

function _import (file) {
return () => import('@/components/views/' + file + '.vue')
}
經過異步加載組件，去請求該組件

其中的路徑須要你們根據本身文件的路徑去修改。

這種方法最重要的一點就是，後臺傳遞的component實際存放的是路徑！前端根據這個路徑去找到這個組件並異步加載組件。

最終執行結束後，filterRouter返回的就是一份路由權限列表，裏面的component也有了引用。

這種方法的好處在於，前端的全部權限路由數據都來自於後臺，只要路徑不改，後臺任意修改數據，前端均會自動變化。

 

2、渲染數據到側邊欄經過 （一） 的方式咱們能夠拿到一份要渲染的路由表，我是存到了vuex中，而後在sideBar頁面中拿出來，渲染。 ———————————————— 版權聲明：本文爲CSDN博主「上條當楊」的原創文章，遵循CC 4.0 by-sa版權協議，轉載請附上原文出處連接及本聲明。原文連接：https://blog.csdn.net/qq_31906983/article/details/89054798