权限自定义指令

src/api/common.js

@@ -50,4 +50,11 @@ export function apiCommonSetSysConfig(params){
  */
 export function apiGetLanguageConfig(params){
     return get('/system/config/language',params)
+}
+
+/**
+ * 获取系统按钮权限
+ */
+export function apiGetAuthBtnList(){
+    return get('/system/role/menu/buttons',{})
 }

src/directives/AuthBtn.js

@@ -0,0 +1,51 @@
+//按钮权限指令
+//eg: v-permission="buttonCode"
+import {useAuthBtnStore} from '@/store/modules/authBtn'
+export default {
+    mounted(el, binding) {
+        let {
+            value
+        } = binding
+        // 拿出所有按钮的code
+        const authBtnStore = useAuthBtnStore()
+        let buttonCodes = authBtnStore.authBtnList.map(item => item.ButtonCode)
+        console.log('test',buttonCodes)
+        if (value && typeof (value) == 'string') {
+            // 字符类型
+            if (!buttonCodes.includes(value)) {
+                // 没有权限，删除dom
+                el.parentNode && el.parentNode.removeChild(el)
+            }
+        } else if (Array.isArray(value)) {
+            // 数组类型
+            /**
+             * 权限类型 type
+             * or-只要一个满足 and-全部都满足
+             */
+            let type;
+            let hasType = ['or', 'and'].includes(value[value.length - 1].toLocaleLowerCase())
+            if (hasType) {
+                //参数中有标明type
+                type = value[value.length - 1].toLocaleLowerCase()
+                // 去掉最后一个权限类型参数
+                value.pop()
+                // console.log(value,true);
+                let operation = type == 'or' ? 'some' : 'every'
+                if (!value[operation](item => buttonCodes.includes(item))) {
+                    // 没有权限，删除dom
+                    el.parentNode && el.parentNode.removeChild(el)
+                }
+            } else {
+                type = 'or'
+                // console.log(value,false);
+                if (!value.some(item => buttonCodes.includes(item))) {
+                    // 没有权限，删除dom
+                    el.parentNode && el.parentNode.removeChild(el)
+                }
+            }
+        } else {
+            throw new Error('permission指令参数类型错误')
+        }
+
+    },
+}

src/directives/Index.js

@@ -1,8 +1,9 @@
 // 注册自定义指令
 import ScreenshotDirective from './Screenshot'
 import LongPress from './LongPress';
-
+import Permission from './AuthBtn';
 export function RegisterDirective(app){
     app.directive('screenshot', ScreenshotDirective);
     app.directive('longpress', LongPress);
+    app.directive('permission',Permission)
 }

src/hooks/useAuthBtn.js

@@ -0,0 +1,42 @@
+//权限按钮相关
+import {useAuthBtnStore} from '@/store/modules/authBtn'
+const authBtnStore = useAuthBtnStore()
+/*
+---------------------------研报管理----------------- 
+*/
+export const reportManageBtn = {}
+export const enReportManageBtn = {}
+
+/*
+--------------------------智能PPT-----------------
+*/
+export const pptBtn={}
+export const enPPTBtn={}
+
+/*
+--------------------------ETA指标库---------------
+*/
+export const edbDataBtn={}
+
+/*
+-------------------------ETA图库------------------
+*/
+export const chartLibBtn={}
+
+/*
+------------------------MyETA--------------------
+*/
+export const myETABtn={}
+
+
+export function useAuthBtn(){
+    const isShowBtn = ()=>{}
+    const checkAuthBtn = (buttonCode)=>{
+        const list = authBtnStore.authBtnList||[]
+        return list.map(item=>item.ButtonCode).includes(buttonCode)
+    }
+    return {
+        isShowBtn,
+        checkAuthBtn
+    }
+}

src/router/index.js

@@ -10,6 +10,7 @@
  */
 import { createRouter, createWebHistory } from "vue-router";
 import {useCachedViewsStore} from '@/store/modules/cachedViews'
+import {useAuthBtnStore} from '@/store/modules/authBtn'
 
 import { pptRoutes } from "./ppt";
 import {pptENRoutes} from './pptEn'
@@ -18,6 +19,7 @@ import {reportRoutes} from './report'
 import {reportEnRoutes} from './reportEn'
 import {chartETARoutes} from './chartETA'
 import {dataEDBRoutes} from './dataEDB'
+import { storeToRefs } from "pinia";
 
 const routes = [
   	{
@@ -113,9 +115,10 @@ function setKeeplive(to){
 	}
 }
 
-router.beforeEach((to, from, next) => {
+router.beforeEach(async(to, from, next) => {
 	setKeeplive(to)
-
+    const authBtnStore = useAuthBtnStore()
+    to.path!='/login'&&await authBtnStore.getAuthList()
 	document.title = to.meta.title;
   	next();
 });

src/store/modules/authBtn.js

@@ -0,0 +1,23 @@
+/**
+ * 权限按钮
+ */
+import {apiGetAuthBtnList} from '@/api/common';
+import { defineStore } from "pinia";
+export const useAuthBtnStore = defineStore('authBtn',{
+    state:()=>{
+        return {
+            authBtnList:[]
+        }
+    },
+    actions:{
+        getAuthList(){
+            return new Promise((resolve)=>{
+                /* apiGetAuthBtnList().then(res=>{
+                    this.authBtnList = res.Data||[]
+                }) */
+                this.authBtnList = [{ButtonCode: "system:menu:add"}]
+                resolve('权限获取成功')
+            })
+        }
+    }
+})