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

Posted 2020-10-19 weven&JS

项目地址：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 定义了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\'}}
      ]
    }
];

store/modules/login.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

有什么问题欢迎提问～