vue quasar 實現動態路由

在之前的版本中，許可權的操作是預先在前端的路由元資訊中設定好的，像這樣


,  component:()
=>
import
('@/views/home/home'
)}

但是最近有不少同學想看看我是如何實現後端返回路由，並在前端顯示的。於是就寫了個demo，來互相學習。

:::tip

在使用後端返回的路由之前，我們能確定的是，之前我們在路由元資訊中，為路由新增的許可權資訊已經不再需要了。我們只需根據當前使用者的資訊，從後端獲取到他所擁有的路由即可

:::那麼問題來了，路由需要引入元件，像這樣component: () => import('@/views/home/home')，對於這樣的資料，我們該如何儲存在我們的資料庫中呢

目前最通用的是把路由資料轉變為特定的json格式，並且在從後端獲取到json格式的路由資訊之後，通過自定義的方法，將json格式的路由資訊轉換為vue-router可以用的形式。

在這個專案中，我把路由資訊通過自定義方法handleasyncroutertojson轉換為json格式

比如將下面的路由

import layout from
'../components/layout/layout'
......
,  component:()
=>
import
('@/views/home/home')}
,,component: layout
}...
...

轉化為路由json格式：


,"component"
:"views/home/home.vue"},
,"component"
:"layout"
}

轉換成功之後，在每一次路由守衛中都去判斷當前使用者是否請求了路由，如果沒有請求路由就去後端請求路由並使用自定義的handlejsonroutertoasyncrouter方法將json格式的路由轉換為vue-router可用的路由，最後使用router.addroutes()加入到vue-router中。

路由守衛的**如下：

:::tip

從後端請求動態路由的操作，我使用github page模擬了乙個後台介面getuserrouter

請求的資料儲存在data/asyncrouterdemo中

:::router/permissionwithdynamicrouter.js

const view404 =
}router.
beforeeach
(async
(to,
from
, next)
=>)}
// 動態路由不需要儲存使用者角色了，判斷 store 中路由不為空則放行即可
if(store.getters.getroutes.length)
else)}
}else
else)}
}})router.
aftereach((
)=>
)export
default router

到這裡從後端獲取路由的操作就結束了，其實就是路由的資料**改變。

:::tip

如果你只希望知道如何使用，請看動態路由的原始碼，同時記得在main.js中使用專門用於動態路由的鑑權工具permissionwithdynamicrouter即可

// 前端根據角色處理路由
// import router from './router/permission'
// 後端返回動態路由
import router from
'./router/permissionwithdynamicrouter'

畢竟每個專案或是每個公司的實現方式均不同，相同的是思想。

如果你想深入研究，可以繼續往下看，不過，一小時油耗兩個包子…

:::下面定義了如何將路由轉換為json格式以及如何將json格式轉換為可用路由的兩個方法。

方法位於permissionutils.js裡，這些方法的實現都有種廣度優先的意思

:::warning

不要在map()/filter()內進行async/await操作（親自採坑了…）

當async函式被執行時，將立即返回pending狀態的promise，因此，在map()/filter()迴圈時，方法不會等待await操作完成，而是直接進入下一次迴圈，所以應當配合for迴圈使用async。

:::

import layout from
'../components/layout/layout'
/** * 將後端傳入的 router 字串轉化為 vue-router 可用的物件
* @param jsonrouter 後台路由
* @param t 佔存變數，用於返回值（不需要傳參）
*/export
function
handlejsonroutertoasyncrouter
(jsonrouter, t)
else
return item
})for(
const item of t)
}return t
}function
handlecomponent
(component)
/** * 將 vue 路由轉換為 json 字串
* 將 asyncrouters 的 roles 初始化為空，同時處理 component 的懶載入：
* component: () => import('../views/home/home') 轉換為 component: 'views/home/home'
* @param asyncrouters
* @returns  處理後的 asyncrouters json 字串
*/export
async
function
handleasyncroutertojson
(asyncrouters)
// 當遍歷到 *（404）路由時，說明遍歷完成，接著去處理 component 的懶載入
if(item.path ===
'*')}}
/** * 處理 component 的懶載入
* component: () => import('../views/home/home') 轉換為 component: 'views/home/home'
* @param asyncrouters
* @returns 
*/export
async
function
handleasyncroutercomponenttojson
(asyncrouters)
else
if(item.component)
if(item.children)
// 當遍歷到 * （404）路由時，說明遍歷完成
if(item.path ===
'*')}}
/** * 用於新增新角色和對應的路由
* 使用 selectedrouter 過濾 baserouter 中的路由，得到新的角色路由（廣度優先）
* @param baserouter 基礎路由
* @param selectedrouter：array  被選中的路由標識
* @param t 暫存變數
* @returns  處理後的 asyncrouters json 字串
*/export
function
handlebaseroutertorolesrouter
(baserouter, selectedrouter, t))}
)for
(const item of t)
}return t
}

不僅如此，在視覺化選擇動態路由的 demo 中，用到了路由物件根據選中的路由標識陣列，過濾路由的方法

/**
* 用於新增新角色和對應的路由
* 使用 selectedrouter 過濾 baserouter 中的路由，得到新的角色路由（廣度優先）
* @param baserouter 基礎路由
* @param selectedrouter：array 被選中的路由標識
* @param t 暫存變數
* @returns  處理後的 asyncrouters 字串
*/export
function
handlebaseroutertorolesrouter
(baserouter, selectedrouter, t))}
)for
(const item of t)
}return t
}

vue quasar 實現動態路由

vue動態路由的實現

靜態路由動態路由

靜態路由動態路由

vue quasar 實現動態路由

vue動態路由的實現

靜態路由 動態路由

靜態路由 動態路由

相關推薦

靜態路由動態路由

靜態路由動態路由