[聚合文章] vue vuex vue-rouert后台项目——权限路由（超详细简单版）

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

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

// 初始化路由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'}}      ]    }];

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);        });      },

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')        }    }})

// mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性...mapGetters([        'newrouter'    ])