vue vuex vue-rouert后臺項目——權限路由（適合初學）
更新時間：2017年12月29日 13:45:53 作者：weven&JS
這篇文章主要介紹了vue vuex vue-rouert后臺項目——權限路由，通過本文可以很清除的捋清楚vue+vuex+vue-router的關系，本版本非常簡單，適合初學者,需要的朋友可以參考下
項目地址： vue-simple-template
共三個角色：adan barbara carrie 密碼全是：123456
adan 擁有 最高權限A 他可以看到 red , yellow 和 blue 頁面（共三個頁面）
barbara 擁有 權限B 他可以看到 red 和 yellow 頁面
carrie 擁有 權限C 他可以看到 red 和 blue 頁面
技術棧
webpack ---- 打包神器 vue ---- JavaScript 框架 vuex ---- 實現不同組件間的狀態(tài)共享 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 ---- 主題 字體等靜態(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') { //判斷權限
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 輔助函數僅僅是將 store 中的 getter 映射到局部計算屬性 ...mapGetters([ 'newrouter' ])
此項目拿去 捋清楚 vue+vuex+vue-router 的關系是沒問題的，這可以說的超級簡單的版本，適合初學。上面的內容說的重點，其實也算是項目的全部啦
項目地址： vue-simple-template
總結
以上所述是小編給大家介紹的vue vuex vue-rouert后臺項目——權限路由（適合初學），希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
本篇文章通過實例給大家分享了vue自動化表單的操作方法以及相關的代碼做了描述，有興趣的朋友可以跟著學習下。2018-05-05
當遍歷一個數組或枚舉一個對象進行迭代循環(huán)展示時，就會用到列表渲染指令 v-for。這篇文章主要介紹了Vue.js 中的 v-for 列表渲染指令,需要的朋友可以參考下2018-11-11
Vue3+script setup+ts+Vite+Volar搭建項目
本文主要介紹了Vue3+script setup+ts+Vite+Volar搭建項目，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
node.js開發(fā)輔助工具nodemon安裝與配置詳解
node.js代碼修改后，需要重新啟動 Express 應用，所做的修改才能生效。若之后的每次代碼修改都要重復這樣的操作，勢必會影響開發(fā)效率，本文將詳細介紹Nodemon，它會監(jiān)測項目中的所有文件，一旦發(fā)現文件有改動，Nodemon 會自動重啟應用2020-02-02
這篇文章主要介紹了Monorepo風格的組件工程搭建示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
Vuejs入門教程之Vue生命周期，數據，手動掛載，指令，過濾器
本篇文章主要介紹了Vuejs入門教程之Vue生命周期，數據，手動掛載，指令，過濾器的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
這篇文章主要介紹了vue3保存屬性自動換行問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細介紹了如何使用vue實現簡單的猜謎卡片游戲,文中的示例代碼講解詳細,具有一定的學習價值,感興趣的小伙伴可以參考一下2023-09-09
在移動端使用vue-router和keep-alive的方法示例
這篇文章主要介紹了在移動端使用vue-router和keep-alive的方法示例，vue-router與keep-alive提供的路由體驗與移動端是有一定差別的，感興趣的小伙伴們可以參考一下2018-12-12
在vue2中我們通常會在模板中通過三目運算符和require來實現動態(tài)圖片,下面這篇文章主要給大家介紹了關于Vite不能使用require問題的解決方法,需要的朋友可以參考下2022-10-10