管理系统权限设计

// directives.js
import store from '@/store'
export default {
    'hasRole': {
        inserted: function (el, binding, vnode) {
            let roles = store.state.userInfo.roles || ['user']
            if(!roles.includes(binding.value)) {
                el.parentNode.removeChild(el)
            }
        }
    }
}

// xxx.vue
<div v-hasRole="'admin'">
    ...
</div>

// vuex
import vuex from './vuex';
let dynamicRouter = [{
    path: '',
    name: '',
    component: xxx,
    meta: {
        // 通过后台动态添加到路由  addRoutes
        types: ['get', 'add', 'edit']
    }
}]

state: {
  isAddRoutes: false,
  // 后端返回的原始数据默认存到 localStorage，每次初始化取出来
  roleRouterRules: JSON.parse(localStorage.getItem('roleRouterRules')),
},
// 公共变量 => 派生私有变量
getters: {
  isAddRoutes: state => state.isAddRoutes,
  // 根据 roleRouterRules 生成当前角色的动态路由配置数据（addRoutes方法可以直接使用的路由数组)
  roleRouter: state => {
    if (state.roleRouterRules) {
      return dynamicRouter.filter(
        router => state.roleRouterRules.indexOf(router.name) >= 0,
      );
    } else return null;
  },
},
// 私有方法(同步) => 改变静态变量
mutations: {
  set_isAddRoutes: (state, data) => (state.isAddRoutes = data), // payload: true/false
  set_roleRouterRules: (state, data) => (state.roleRouterRules = data), // payload: true/false
},
// 公共方法（可异步）=> 调用私有方法
actions: {
  set_isAddRoutes({ commit }, data) {
    commit('set_isAddRoutes', data);
  },
  set_roleRouterRules({ commit }, data) {
    // 保存到vuex
    commit('set_roleRouterRules', data);
    // 保存到 localStorage,当用户强制刷新浏览器时我们要使用这一份数据初始化 state.roleRouterRules
    localStorage.setItem('roleRouterRules', JSON.stringify(data));
  },
}

// routes.js
import vuex from './vuex'
router.beforeEach((to, from, next) => {
  let path = to.redirectedFrom || to.path
  // 白名单 放行
  if (whiteList.indexOf(path) >= 0) return next()
  // 黑名单
  if (!vuex.getters.roleRouter) return next({ path: '/login' })
  if (!vuex.getters.isAddRoutes) {
    router.addRoutes(vuex.getters.roleRouter)
    vuex.dispatch('set_isAddRoutes', true)
    next(path);
  } else {
    next();
  }
});

// xxx.vue
import { mapActions } from "vuex";
export default {
  methods: {
    ...mapActions([
     "set_roleRouterRules"
    ]),
    login(roleRouterRules) {
     // 登录成功，vuex 存储角色路由
     this.set_roleRouterRules(roleRouterRules);
     // 跳转到动态注册B
     this.$router.replace({ path: "/b" });
    }
  }
};

// directives.js
export default {
    'hasPermission': {
        inserted: function (el, binding, vnode) {
            let types = vnode.context.$route.meta.types
            let values = binding.value
            let flag = true
            for(let v of values) {
                if(!types.inclues(v)) {
                    flag = false
                }
            }
            
            if(!flag) {
                el.parentNode.removeChild(el)
            }
        }
    }
}

// vuex
import vuex from './vuex';
let routes = [{
    path: '',
    name: '',
    component: xxx,
    meta: {
        // 通过后台动态添加到路由  addRoutes
        types: ['get', 'add', 'edit']
    }
}]

// xxx.vue
<span v-hasPermission="['get', 'delete']">
    ...
</span>