詳解基于vue-router的動態(tài)權限控制實現(xiàn)方案
使用vue開發(fā)帶權限管理系統(tǒng)，尤其是采用了vue-router做路由，很多人都遇到的一個問題就是如何動態(tài)加載路由path對應的component。
典型的應用場景就是：前端菜單不靜態(tài)的寫在vue程序里，而是要從后臺程序和數(shù)據(jù)庫返回的菜單來動態(tài)加載到vue應用中。
網(wǎng)上很多問權限的問題，但幾乎找不到很好的解決答案，在很長一段時間里，非常打擊使用vue技術棧開發(fā)的信心。最有質量的一篇文章是：http://www.fzitv.net/article/124801.htm
但作者并沒有完全解決這個問題，還留有幾個問題是：
1）登錄之后跳轉到首頁，此時路由已經(jīng)是加載完成的了不能更改，菜單可以顯示但是沒有路由。
2）前端應用人為刷新網(wǎng)頁路由產(chǎn)生某些問題。
本文即在這篇文章的基礎上對這兩個問題解決，以使其完整。
前提是認真拜讀上面提到的那篇文章，下面直接用代碼說話:
問題1的解決思路：
登錄之后跳轉到首頁，router是vue應用的router 引入進登錄方法，在登錄之后跳轉之前對router進行改變，改變要點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) { // 避免注銷后在不刷新頁面的情況下再登錄重復加載路由
commit(types.ADD_MENU, menus)
// 動態(tài)加載路由關鍵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的子路由是基于：登錄之后跳轉到Main主頁，該主頁是類似于frame的頁面加載框架，只有將動態(tài)路由作為Main的子路由才能確保其他頁面顯示到Main框架內。
...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代碼暫不能全部公開，有問題可留言。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue使用moment如何將時間戳轉為標準日期時間格式問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了Vue3請求攔截器里如何配置token,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了Vue 權限控制的兩種方法(路由驗證)，每種方法給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08
vue作用域插槽詳解、slot、v-slot、slot-scope
這篇文章主要介紹了vue作用域插槽詳解、slot、v-slot、slot-scope，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
本篇文章主要介紹了Vue.use自定義自己的全局組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
element實現(xiàn)二級菜單和頂部導航聯(lián)動的示例
本文主要介紹了element實現(xiàn)二級菜單和頂部導航聯(lián)動的示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了在vue項目中使用md5加密的方法,需要的朋友可以參考下2018-09-09
下面小編就為大家分享一篇vue.js獲得當前元素的文字信息方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue項目配置eslint保存自動格式化問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue獲取token實現(xiàn)token登錄的示例代碼
最近新做了個vue項目，正好項目中有登錄部分，本文就詳細的介紹一下登錄部分的實現(xiàn)，文中通過示例代碼介紹的非常詳細，感興趣的小伙伴們可以參考一下2021-11-11