Management system permission design

1. Role control design

Method 1 Component level permission control ：

// 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>

Method 2 Use Vue Router Of addRoutes Method to dynamically add user's permission routing ：

// vuex
import vuex from './vuex';
let dynamicRouter = [{
    path: '',
    name: '',
    component: xxx,
    meta: {
        //  Dynamically add to the route through the background   addRoutes
        types: ['get', 'add', 'edit']
    }
}]

state: {
  isAddRoutes: false,
  //  The original data returned by the back end is saved to by default  localStorage, Each initialization takes it out 
  roleRouterRules: JSON.parse(localStorage.getItem('roleRouterRules')),
},
//  Public variables  =>  Derive private variables 
getters: {
  isAddRoutes: state => state.isAddRoutes,
  //  according to  roleRouterRules  Generate dynamic routing configuration data for the current role （addRoutes Method can be used directly )
  roleRouter: state => {
    if (state.roleRouterRules) {
      return dynamicRouter.filter(
        router => state.roleRouterRules.indexOf(router.name) >= 0,
      );
    } else return null;
  },
},
//  Private method ( Sync ) =>  Changing static variables 
mutations: {
  set_isAddRoutes: (state, data) => (state.isAddRoutes = data), // payload: true/false
  set_roleRouterRules: (state, data) => (state.roleRouterRules = data), // payload: true/false
},
//  Public methods （ Asynchronous ）=>  Call private method 
actions: {
  set_isAddRoutes({ commit }, data) {
    commit('set_isAddRoutes', data);
  },
  set_roleRouterRules({ commit }, data) {
    //  Save to vuex
    commit('set_roleRouterRules', data);
    //  Save to  localStorage, When the user forces the browser to refresh, we use this data to initialize  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
  //  White list   release 
  if (whiteList.indexOf(path) >= 0) return next()
  //  The blacklist 
  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) {
     //  Login successful ,vuex  Storage role routing 
     this.set_roleRouterRules(roleRouterRules);
     //  Jump to dynamic registration B
     this.$router.replace({ path: "/b" });
    }
  }
};

Method 3 Add permission control to the route ：

// 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: {
        //  Dynamically add to the route through the background   addRoutes
        types: ['get', 'add', 'edit']
    }
}]

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

2. Menu permission design

• Database design