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

原文链接: https://zhuanlan.zhihu.com/p/32632426

vue vuex vue-rouert后台项目——权限路由（超详细简单版）

李斌

4 hours ago

项目地址：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的暴露在外的getter字段

// ----  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'}}      ]    }];// ----  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'    ])
                注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。