vuevuexvuerouter後臺項目——權限路由(超詳細簡單版)

NO IMAGE

項目地址:vue-simple-template
共三個角色:adan barbara carrie 密碼全是:123456

adan 擁有 最高權限A 他可以看到 red , yellow 和 blue 頁面(共三個頁面)

barbara 擁有 權限B 他可以看到 red 和 yellow 頁面

carrie 擁有 權限C 他可以看到 red 和 blue 頁面

vuevuexvuerouter後臺項目——權限路由(超詳細簡單版)

技術棧

webpack         ---- 打包神器
vue             ---- JavaScript 框架
vuex            ---- 實現不同組件間的狀態共享
vue-router      ---- 頁面路由
babel-polyfill  ---- 將ES6代碼轉為ES5代碼
normalize.css   ---- 重置掉該重置的樣式
element-ui      ---- UI組件庫

項目初始化

# cd 到項目文件夾
cd weven-simple-template
# 安裝依賴 (本項目還安裝了其他依賴詳情 請見 package.json 文件)
npm install
# 運行項目
npm run dev

項目結構

vue-cil 腳手架初始化項目後,我只修改過src文件夾

src
├── App.vue         ---- 頁面入口
├── api             ---- api請求
│   └── login.js    ---- 模擬json對象數據
├── assets          ---- 主題 字體等靜態資源
│   └── logo.png
├── components      ---- 組件
│   ├── index.vue
│   └── login.vue 
├── main.js         ---- 初始化組件 加載路由
├── router          ---- 路由
│   └── index.js
└── store           ---- vuex狀態管理
├── getters.js
├── index.js
└── modules
└── login.js

重點:

動態路由的關鍵在於router配置的meta字段和vuex的暴露在外的getter字段

// ----  router/index.js  ----
// 初始化路由
export default new Router({  
routes: [
{
path: '/login',
name: 'Login',
component: Login
}
]  
});
// 動態路由 meta 定義了role
export const powerRouter =[    
{ path: '/',redirect:'/red', name: 'index',component: Index,hidden:false,
children: [
{ path: '/red', name: 'red', component: red,},
{ path: '/yellow', name: 'yellow', component: yellow, meta: {role: 'B'}},
{ path: '/blue', name: 'blue', component: blue, meta: {role: 'C'}}
]
}
];
// ----  main.js  ----
router.beforeEach((to, from, next) => {
if(store.getters.role){ //判斷role 是否存在
if(store.getters.newrouter.length !== 0){  
next() //resolve 鉤子
}else{
let newrouter
if (store.getters.role == 'A') {  //判斷權限
newrouter = powerRouter
} else {
let newchildren = powerRouter[0].children.filter(route => {
if(route.meta){
if(route.meta.role == store.getters.role){
return true
}
return false
}else{
return true
}
});
newrouter = powerRouter
newrouter[0].children = newchildren
}
router.addRoutes(newrouter) //添加動態路由
store.dispatch('Roles',newrouter).then(res => { 
next({ ...to })
}).catch(() => {       
})
}	  
}else{
if (['/login'].indexOf(to.path) !== -1) { 
next()
} else {
next('/login')
}
}
})
// ----  components/index.vue  ----
// mapGetters 輔助函數僅僅是將 store 中的 getter 映射到局部計算屬性
...mapGetters([
'newrouter'
])

此項目拿去 捋清楚 vue+vuex+vue-router 的關係是沒問題的,這可以說的超級簡單的版本,適合初學。可以配合相關的官方文檔學習。上面的內容說的重點,其實也算是項目的全部啦

項目地址:vue-simple-template
感覺還不錯的話就請給個 star 吧~ 謝謝

有什麼問題歡迎提問~

相關文章

摸索小數轉為二進制的機制,探討為什麼js計算的小數有個尾巴

在微信小程序中使用阿里OSS(alioss)接口上傳圖片至阿里雲對象存儲(OSS)

Python讓你的Web應用程飛起來全家桶之Sanic

讓你的Python(Web應用)飛起來,(異步/協程)全家桶