添加指令：v-auth，根据当前角色来选择是否展示页面某些元素

web/src/directive/auth.js

@@ -0,0 +1,40 @@
+// 权限按钮展示指令
+import { store } from '@/store/index'
+const userInfo = store.getters['user/userInfo']
+export const auth = (Vue) => {
+    Vue.directive('auth', {
+        // 当被绑定的元素插入到 DOM 中时……
+        bind: function (el, binding) {
+          let type = ""
+          switch (Object.prototype.toString.call(binding.value)) {
+            case "[object Array]":
+              type = "Array"
+              break;
+            case "[object String]":
+              type = "String"
+              break;
+            case "[object Number]":
+              type = "Number"
+              break;
+            default:
+              type = ""
+              break;
+          }
+          if (type === "") {
+            /* eslint-disable */
+            console.error("v-auth必须是Array,Number,String属性,暂不支持其他属性")
+            /* eslint-enable */
+            return
+          }
+          const waitUse = binding.value.toString().split(",")
+
+          let flag = waitUse.some(item=>item==userInfo.authorityId)
+          if (binding.modifiers.not) {
+            flag = !flag
+          }
+          if(!flag){
+            el.style.display = 'none'
+          }
+        }
+      })
+}

web/src/main.js

@@ -47,6 +47,11 @@ Vue.use(APlayer, {
 });
 
 
+import {auth} from '@/directive/auth'
+// 按钮权限指令
+auth(Vue)
+
+
 new Vue({
     render: h => h(App),
     router,
@@ -56,6 +61,3 @@ new Vue({
 //引入echarts
 import echarts from 'echarts'
 Vue.prototype.$echarts = echarts;
-
-
-