如何上手vue vuex vue-rouert后台的权限路由

这篇文章给大家介绍如何上手vue vuex vue-rouert后台的权限路由，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

项目地址： 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-rouert后台的权限路由就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。