vue后台登录---权限路由

技术栈:

wepack ---- 打包神器

vue---js框架

vuex---实现不同组件间的状态共享

注 : 简述vuex和localStorage,全局变量的区别:

为了解决跨组件之间的数据共享问题,一个组件的数据变化映射到使用这个数据的其他组件中,刷新页面之前存储的vuex数据会被初始化掉.

localStorage是H5提供的数据存储方式,替代了cookie存放数据(cookie的数据量太小),可以有5M的限制,不受刷新页面控制,长久保存

vuex是由于页面之间的传参对于多层嵌套组件很繁琐,对于兄弟组件之间的传参没办法,就将组件的共享状态抽取出来,以全局单例模式管理,即vuex

vuex和全局变量的区别

响应式 : vuex的状态存储是响应式的,当Vue组件从store中读取状态的时候,若store中的状态发生变化,相应的组件就会得到高效更新

不能直接改变store : 不能直接改变store的变化.改变store中状态的唯一途径是commit mutation.

vue-router---页面路由

babel-polyfill---将ES6代码转为ES5代码

normalize.css---重置掉改重置的样式

element-ui---UI组件库

动态路由的关键在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);//将data解析成Promise对象
        }).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'
    ])