后台代码返回权限

/**
 *
 * 返回一个权限集合。
 *  /test/per
 */
@RequestMapping("/per")
public R per(){
    Map<String,Object> map=new HashMap<>();
    List<String> perList = new ArrayList<>();
    perList.add("user:edit");
    map.put("perList",perList);
    return R.ok(map);
}

工具类

// usePermissions.js
import { ref, computed } from 'vue';

export function usePermissions(permissions = []) {

    const userPermissions = ref(permissions);

// 提供一个方法来更新用户权限（可选）  接受数组
    function updatePermissions(newPermissions) {
        userPermissions.value = newPermissions;
    }

// 但是，由于 computed 不能直接作为函数传递参数（它会返回一个响应式对象），
// 我们需要稍微改变一下策略，返回一个函数来检查权限。
    function checkPermission(permission) {
        return userPermissions.value.includes(permission);
    }

// 返回更新权限的方法和检查权限的函数
    return {
        updatePermissions,
        checkPermission,
    };
}
// 注意：上面的 hasPermission 计算属性方法在这里不适用，因为我们需要一个直接返回布尔值的函数。
// 因此，我们使用了 checkPermission 函数来代替。

vue3代码实现

<template>

  <div>
    <el-button v-if="permissions.checkPermission('user:add')">add</el-button>
    <el-button v-if="permissions.checkPermission('user:edit')" type="primary">edit</el-button>
    <el-button v-if="permissions.checkPermission('user:list')"  type="success">list</el-button>
  </div>


</template>

<script setup>
    import requestUtil from "@/util/request";
    import  store from '@/store'
    import  {ref, onMounted,nextTick , onBeforeMount, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from 'vue'
    import  {ElMessage} from 'element-plus'
    import  router from '@/router'
    import Cookies from "js-cookie";
    import { encrypt, decrypt } from "@/util/jsencrypt";
    import {Check,  Delete,  Edit,   Message,  Search,   Star,} from '@element-plus/icons-vue'

    import { usePermissions } from '@/util/usePermissions'; // 假设 usePermissions.js 在同一目录下

    // 假设这是从某个 API 获取的用户权限（这里使用 ref 来模拟异步获取）
    const initialPermissions = ref([]);
    // 使用 usePermissions 钩子来获取权限检查功能
    const permissions = usePermissions(initialPermissions.value);

    const getInfi=async()=>{
      const res=await requestUtil.get("test/per");
      console.log("获取的权限",res);
      console.log("获取的权限",res.data.code);
      console.log("获取的权限",res.data.perList);
      permissions.updatePermissions(res.data.perList); // 更新权限
    }



    // 在组件挂载完成后调用
    onMounted(() => {
      console.log('mounted');
      getInfi();
    });
</script>

<style scoped>
div{
  padding: 25px;
}
</style>