182

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

 6 years ago
source link: https://juejin.im/post/5a4da656f265da431e172d94
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

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

2018年01月04日 09:40 ·  阅读 15849

项目地址：vue-simple-template 共三个角色：adan barbara carrie 密码全是：123456

adan 拥有 最高权限A 他可以看到 red , yellow 和 blue 页面（共三个页面）

barbara 拥有 权限B 他可以看到 red 和 yellow 页面

carrie 拥有 权限C 他可以看到 red 和 blue 页面

160bf53da9737936~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image
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 定义了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'}}
      ]
    }
];
复制代码
// ----  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 感觉还不错的话就请给个 star 吧～ 谢谢

有什么问题欢迎提问～


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK