詳解基于vue-router的動態(tài)權(quán)限控制實現(xiàn)方案
使用vue開發(fā)帶權(quán)限管理系統(tǒng)，尤其是采用了vue-router做路由，很多人都遇到的一個問題就是如何動態(tài)加載路由path對應(yīng)的component。
典型的應(yīng)用場景就是：前端菜單不靜態(tài)的寫在vue程序里，而是要從后臺程序和數(shù)據(jù)庫返回的菜單來動態(tài)加載到vue應(yīng)用中。
網(wǎng)上很多問權(quán)限的問題，但幾乎找不到很好的解決答案，在很長一段時間里，非常打擊使用vue技術(shù)棧開發(fā)的信心。最有質(zhì)量的一篇文章是：http://www.dbjr.com.cn/article/124801.htm
但作者并沒有完全解決這個問題，還留有幾個問題是：
1）登錄之后跳轉(zhuǎn)到首頁，此時路由已經(jīng)是加載完成的了不能更改，菜單可以顯示但是沒有路由。
2）前端應(yīng)用人為刷新網(wǎng)頁路由產(chǎn)生某些問題。
本文即在這篇文章的基礎(chǔ)上對這兩個問題解決，以使其完整。
前提是認(rèn)真拜讀上面提到的那篇文章，下面直接用代碼說話:
問題1的解決思路：
登錄之后跳轉(zhuǎn)到首頁，router是vue應(yīng)用的router 引入進(jìn)登錄方法，在登錄之后跳轉(zhuǎn)之前對router進(jìn)行改變，改變要點1是精確賦值到router的routes具體地方，比如我這里是routes[0]的子路由，2是用addRoutes函數(shù)使其生效。
登錄功能的js
export const login = ({commit}, data) => { Service.post('/login', Qs.stringify(data))
.then(res => {
const success = Object.is(res.statusText, 'OK') && Object.is(res.data.code, '0')
if (success) {
var menus = generateMenus(res.data.menus)
window.sessionStorage.routes = JSON.stringify(menus)
if (menuModule.state.items.length <= 0) { // 避免注銷后在不刷新頁面的情況下再登錄重復(fù)加載路由
commit(types.ADD_MENU, menus)
// 動態(tài)加載路由關(guān)鍵2行
router.options.routes[0].children.push(...generateRoutesFromMenu(menuModule.state.items))
router.addRoutes(router.options.routes)
}
window.sessionStorage.loginName = data.loginName
router.push({path: '/'})
} else {
commit('loginErr', res.data.msg)
}
})
}
function generateRoutesFromMenu (menu = [], routes = []) {
for (let i = 0, l = menu.length; i < l; i++) {
let item = menu[i]
if (item.path) {
routes.push(item)
}
if (!item.component) {
item.component = resolve => require([`views/` + item.component + `.vue`], resolve)
generateRoutesFromMenu(item.children, routes)
}
}
return routes
}
問題2的解決思路：
是不在主app里引入實例化vue-router的js，而是直接在app里實例化router，目的就是網(wǎng)頁刷新的時候每次都確保生成動態(tài)的router。
app.js部分代碼：
Vue.use(Router)
let menus = window.sessionStorage.routes //登錄成功返回的菜單
if (menus) {
let items = JSON.parse(menus)
store.commit(ADD_MENU, items)
}
const router = new Router({
mode: 'hash',
linkActiveClass: 'is-active',
scrollBehavior: () => ({ y: 0 }),
routes: [
{
name: 'Main',
path: '/',
component: require('views/Main.vue'),
children: [ //動態(tài)路由之所以作為Main的子路由是基于：登錄之后跳轉(zhuǎn)到Main主頁，該主頁是類似于frame的頁面加載框架，只有將動態(tài)路由作為Main的子路由才能確保其他頁面顯示到Main框架內(nèi)。
...generateRoutesFromMenu(menuModule.state.items)
]
},
{
name: 'Login',
path: '/login',
component: require('views/Login.vue')
}
]
})
function generateRoutesFromMenu (menu = [], routes = []) {
for (let i = 0, l = menu.length; i < l; i++) {
let item = menu[i]
if (item.path) {
routes.push(item)
}
if (!item.component) {
item.component = resolve => require([`views/` + item.component + `.vue`], resolve)
generateRoutesFromMenu(item.children, routes)
}
}
return routes
}
另附menu items代碼
const state = {
items: [ // 什么菜單都不定義，完全由后端返回
]
}
const mutations = {
[types.ADD_MENU] (state, menuItems) {
if (menuItems.length > 0) {
menuItems.map(function (item) {
item.children.map(function (child) {
child.component = lazyLoading(child.component)
})
})
state.items.push(...menuItems)
}
},
lazyloding
export default (name, index = false) => () => import(`views/${name}${index ? '/index' : ''}.vue`)
git代碼暫不能全部公開，有問題可留言。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
如何解決elementUI打包上線后icon圖標(biāo)偶爾亂碼問題
文章描述了在使用若依框架開發(fā)過程中遇到的圖標(biāo)亂碼問題,通過分析發(fā)現(xiàn)是由于sass編譯器將Unicode編碼轉(zhuǎn)換為明文導(dǎo)致的,文章提供了四種處理方法：使用css-unicode-loader、升高sass版本、替換element-ui的樣式文件和更換打包壓縮方式2025-01-01
解決el-upload批量上傳只執(zhí)行一次成功回調(diào)on-success的問題
這篇文章主要介紹了解決el-upload批量上傳只執(zhí)行一次成功回調(diào)on-success的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
利用Vue.js實現(xiàn)checkbox的全選反選效果
最近用vue做了兩個項目，都需要實現(xiàn)全選反選的功能，所以想著記錄下分享給大家，方便自己或者有需要的朋友們參考講學(xué)習(xí)，所以下面這篇文章主要介紹了利用Vue.js實現(xiàn)checkbox的全選反選效果,需要的朋友可以一起來學(xué)習(xí)學(xué)習(xí)。2017-01-01
這篇文章主要介紹了vue中關(guān)于computed的this指向問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了一文詳解Vue3響應(yīng)式原理，文章通過與vue2.x?的響應(yīng)式做對比詳解展現(xiàn)出了Vue3響應(yīng)式原理詳情，感興趣的小伙伴可以參考一下2022-06-06
這篇文章主要給大家介紹了關(guān)于Vue緩存方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
下面小編就為大家分享一篇Vue下的國際化處理方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
解決Ant Design Modal內(nèi)嵌Form表單initialValue值不動態(tài)更新問題
這篇文章主要介紹了解決Ant Design Modal內(nèi)嵌Form表單initialValue值不動態(tài)更新問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue 實現(xiàn)單選框設(shè)置默認(rèn)選中值
今天小編就為大家分享一篇vue 實現(xiàn)單選框設(shè)置默認(rèn)選中值，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue3?使用provide?inject父子組件傳值失敗且子組件不響應(yīng)
這篇文章主要介紹了vue3使用provide?inject父子組件傳值傳不過去且傳遞后子組件不具備響應(yīng)性問題解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-08-08