項目地址： vue-simple-template
共三個角色：adan barbara carrie 密碼全是：123456
adan 擁有 最高權限A 他可以看到 red , yellow 和 blue 頁面（共三個頁面）
barbara 擁有 權限B 他可以看到 red 和 yellow 頁面
carrie 擁有 權限C 他可以看到 red 和 blue 頁面
技術棧
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的 狀態共存 （不懂可以先查看官方文檔）
router/index.js
// 初始化路由export default new Router({ routes: [ { path: '/login', name: 'Login', component: Login } ] });// 動態路由 meta 定義了roleexport 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) //添加動態路由 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后臺項目――權限路由（適合初學），希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
