灏天阁

vue3.2/Vite/Ts94: 按钮权限的业务实现

· Yin灏

用户小仓库

src/store/modules/user.ts

//...
let useUserStore = defineStore("User", {
  state: (): UserState => {
    return {
      //...
      buttons: [],
    };
  },
  actions: {
    //...
    // 获取用户信息
    async userInfo() {
      const result: userInfoResponseData = await reqUserInfo();
      if (result.code === 200) {
        //...
        this.buttons = result.data.buttons;
        return "ok";
      } else {
        return Promise.reject(new Error(result.message));
      }
    },
  },
});

使用演示

如下方法使用起来过于繁琐

<template>
  <!-- ... -->
  <el-button v-if="userStore.buttons.includes('btn.Trademark.add')"></el-button>
  <!-- ... -->
</template>
<script setup lang="ts">
  import useUserStore from "@/store/modules/user";
  let userStore = useUserStore();
</script>

创建一个全局的自定义指令

  1. 创建指令文件

src/directive/has.ts

import pinia from "@/store";
import useUserStore from "@/store/modules/user";
let userStore = useUserStore(pinia);
export const isHasButton = (app: any) => {
  // 全局自定义指令，实现按钮的权限
  app.directive("has", {
    mounted(el: any, options) {
      if (!userStore.buttons.includes(options.value)) {
        el.parentNode.removeChild(el);
      }
    },
  });
};
  • 使用
<template>
  <!-- ... -->
  <el-button v-has="`btn.Trademark.add`"></el-button>
  <!-- ... -->
</template>
  1. 入口文件中引入

src/main.ts

//...
import { isHasButton } from "@/directive/has";
isHasButton(app);

- Book Lists -