增加自定义指令权限控制DOM

src/App.vue

@@ -84,10 +84,10 @@ export default {
     //加载异步路由
     let asyncRouters = [
       {
-        path: "/asyncFood",
-        name: "asyncFood",
-        alias: "异步菜场",
-        component: () => import("@/views/food/food.vue")
+        path: "/asyncTest",
+        name: "asyncTest",
+        alias: "异步菜单",
+        component: () => import("@/views/asyncTest/asyncTest.vue")
       }
     ];
     this.asyncAddRouters(asyncRouters);

src/store/getter.js

@@ -0,0 +1,5 @@
+const getters = {
+    permission_role: state => state.permission.role
+}
+
+export default getters

src/store/index.js

@@ -1,9 +1,11 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import modules from './modules'
+import getters from './getter'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-	modules
-})
+    modules,
+    getters
+})

src/store/modules/permission.js

@@ -5,6 +5,7 @@ import router, { constantRoutes } from '@/router'
  */
 export const state = {
     routes: [], //最后改变完呈现的路由
+    role: 'admin', //权限admin 目前先写死了
 }
 
 /**
@@ -26,6 +27,9 @@ export const mutations = {
     setRouter(state, asyncRouter) {
         router.addRoutes(asyncRouter) //注册路由
         state.routes = constantRoutes.concat(asyncRouter) //拼接原来的和异步的路由得到最新路由
+    },
+    setRole(state, role) {
+        state.role = role
     }
 }
 
@@ -40,4 +44,11 @@ export const actions = {
         await commit('setRouter', asyncRouter)
         await commit('addRouter')
     },
+
+    /** 设置角色
+     * @param {String} role 角色名 
+     */
+    setPermissionRole({ commit }, role) {
+        commit('setRole', role)
+    }
 }

src/views/asyncTest/asyncTest.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <el-button v-permission="['admin']">admin按钮</el-button>
+    <el-button v-permission="['zayu']">zayu按钮</el-button>
+    <el-button v-permission="['zayu1']">zayu1按钮</el-button>
+    <el-button v-permission="['zayu1','zayu2']">zaui1按钮zayu2按钮</el-button>
+    <hr />
+    <el-input v-model="role" placeholder="输入角色名字"></el-input>
+    <el-button @click="setRole">设置角色</el-button>
+  </div>
+</template>
+
+<script>
+import store from "@/store";
+import { mapActions } from "vuex";
+export default {
+  name: "asyncTest",
+  data() {
+    return {
+      role: ""
+    };
+  },
+  directives: {
+    permission: {
+      inserted(el, binding) {
+        //非管理员的都会被删除
+        let roles = binding.value;
+        let nowRole = store.getters.permission_role; //获取当前权限
+        if (roles.indexOf(nowRole) == -1) {
+          el.parentNode && el.parentNode.removeChild(el); //删除自己
+        }
+      }
+    }
+  },
+  methods: {
+    getRole() {
+      return {
+        role: "admin"
+      };
+    },
+    ...mapActions(["setPermissionRole"]),
+    setRole() {
+      this.setPermissionRole(this.role);
+      console.log(store.getters.permission_role);
+      this.$message({
+          type:'success',
+          message:"更新成功，请切换一下页面，查看更新状态",
+          duration:1000
+      })
+    }
+  }
+};
+</script>
+
+<style>
+</style>