vue vuex vue-rouert后臺項目——權(quán)限路由（適合初學）
更新時間：2017年12月29日 13:45:53 作者：weven&JS
這篇文章主要介紹了vue vuex vue-rouert后臺項目——權(quán)限路由，通過本文可以很清除的捋清楚vue+vuex+vue-router的關系，本版本非常簡單，適合初學者,需要的朋友可以參考下
項目地址： vue-simple-template
共三個角色：adan barbara carrie 密碼全是：123456
adan 擁有 最高權(quán)限A 他可以看到 red , yellow 和 blue 頁面（共三個頁面）
barbara 擁有 權(quán)限B 他可以看到 red 和 yellow 頁面
carrie 擁有 權(quán)限C 他可以看到 red 和 blue 頁面
技術棧
webpack ---- 打包神器 vue ---- JavaScript 框架 vuex ---- 實現(xiàn)不同組件間的狀態(tài)共享 vue-router ---- 頁面路由 babel-polyfill ---- 將ES6代碼轉(zhuǎn)為ES5代碼 normalize.css ---- 重置掉該重置的樣式 element-ui ---- UI組件庫
項目初始化
# cd 到項目文件夾 cd weven-simple-template # 安裝依賴 （本項目還安裝了其他依賴詳情 請見 package.json 文件） npm install # 運行項目 npm run dev
項目結(jié)構(gòu)
vue-cil 腳手架初始化項目后，我只修改過src文件夾
src ├── App.vue ---- 頁面入口 ├── api ---- api請求 │ └── login.js ---- 模擬json對象數(shù)據(jù) ├── assets ---- 主題 字體等靜態(tài)資源 │ └── logo.png ├── components ---- 組件 │ ├── index.vue │ └── login.vue ├── main.js ---- 初始化組件 加載路由 ├── router ---- 路由 │ └── index.js └── store ---- vuex狀態(tài)管理 ├── getters.js ├── index.js └── modules └── login.js
重點：
動態(tài)路由的關鍵在于router配置的 meta字段 和vuex的 狀態(tài)共存 （不懂可以先查看官方文檔）
router/index.js
// 初始化路由
export default new Router({
routes: [
{
path: '/login',
name: 'Login',
component: Login
}
]
});
// 動態(tài)路由 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'}}
]
}
];
store/modules/lo
Logins({ commit }, info){
return new Promise((resolve, reject) => {
let data={};
loginByUserInfo.map(function (item) { //獲取所以用戶信息
if(info.username === item.username || info.pew === item.pew){
commit('SET_USERNAME',item.username); //將username和role進行存儲
sessionStorage.setItem('USERNAME', item.username); //存入 session
commit('SET_ROLE',item.role);
sessionStorage.setItem('ROLE', item.role);
return data={username:item.username,introduce:item.introduce};
}else{
return data;
}
});
resolve(data);
}).catch(error => {
reject(error);
});
},
Roles({ commit }, newrouter){
return new Promise((resolve, reject) => {
commit('SET_NEWROUER',newrouter); //存儲最新路由
resolve(newrouter);
}).catch(error => {
reject(error);
});
},
gin.js actions部分
Logins({ commit }, info){
return new Promise((resolve, reject) => {
let data={};
loginByUserInfo.map(function (item) { //獲取所以用戶信息
if(info.username === item.username || info.pew === item.pew){
commit('SET_USERNAME',item.username); //將username和role進行存儲
sessionStorage.setItem('USERNAME', item.username); //存入 session
commit('SET_ROLE',item.role);
sessionStorage.setItem('ROLE', item.role);
return data={username:item.username,introduce:item.introduce};
}else{
return data;
}
});
resolve(data);
}).catch(error => {
reject(error);
});
},
Roles({ commit }, newrouter){
return new Promise((resolve, reject) => {
commit('SET_NEWROUER',newrouter); //存儲最新路由
resolve(newrouter);
}).catch(error => {
reject(error);
});
},
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') { //判斷權(quán)限
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) //添加動態(tài)路由
store.dispatch('Roles',newrouter).then(res => {
next({ ...to })
}).catch(() => {
})
}
}else{
if (['/login'].indexOf(to.path) !== -1) {
next()
} else {
next('/login')
}
}
})
components/index.vue
// mapGetters 輔助函數(shù)僅僅是將 store 中的 getter 映射到局部計算屬性 ...mapGetters([ 'newrouter' ])
此項目拿去 捋清楚 vue+vuex+vue-router 的關系是沒問題的，這可以說的超級簡單的版本，適合初學。上面的內(nèi)容說的重點，其實也算是項目的全部啦
項目地址： vue-simple-template
總結(jié)
以上所述是小編給大家介紹的vue vuex vue-rouert后臺項目——權(quán)限路由（適合初學），希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- Vue 指令實現(xiàn)按鈕級別權(quán)限管理功能
- 基于Vue自定義指令實現(xiàn)按鈕級權(quán)限控制思路詳解
- 詳解vue + vuex + directives實現(xiàn)權(quán)限按鈕的思路
- vue addRoutes實現(xiàn)動態(tài)權(quán)限路由菜單的示例
- 關于Vue的路由權(quán)限管理的示例代碼
- 基于vue實現(xiàn)網(wǎng)站前臺的權(quán)限管理(前后端分離實踐)
- vue-router路由懶加載和權(quán)限控制詳解
- 詳解基于vue-router的動態(tài)權(quán)限控制實現(xiàn)方案
- 詳解利用 Vue.js 實現(xiàn)前后端分離的RBAC角色權(quán)限管理
- 詳解VUE前端按鈕權(quán)限控制
相關文章
在Vue中使用Viser說明(基于AntV-G2可視化引擎)
這篇文章主要介紹了在Vue中使用Viser說明(基于AntV-G2可視化引擎)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了探秘vue-rx 2.0(推薦)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
解決Vue.js 2.0 有時雙向綁定img src屬性失敗的問題
下面小編就為大家分享一篇解決Vue.js 2.0 有時雙向綁定img src屬性失敗的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue 導出文件,攜帶請求頭token操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了vue項目netWork地址無法訪問的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
vue中常遇到第三方js,這篇文章主要給大家介紹了關于Vue項目中如何引入本地第三方JS庫的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
vue.js使用Element-ui實現(xiàn)導航菜單
這篇文章主要為大家詳細介紹了vue.js使用Element-ui中實現(xiàn)導航菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Vue3-新特性defineOptions和defineModel示例詳解
在Vue3.3中新引入了defineOptions宏主要是用來定義Option API的選項,可以用defineOptions定義任意的選項,props、emits、expose、slots除外,本文給大家介紹Vue3-新特性defineOptions和defineModel,感興趣的朋友一起看看吧2023-11-11
本篇文章主要介紹了詳解使用vue腳手架工具搭建vue-webpack項目，非常具有實用價值，需要的朋友可以參考下2017-05-05
vuex刷新頁面后如何解決丟失store的數(shù)據(jù)問題
這篇文章主要介紹了vuex刷新頁面后如何解決丟失store的數(shù)據(jù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12