在项目中，除了路由权限，最常见的就是按钮级权限，那么如何实现按钮级权限呢？

本文链接：https://blog.youkuaiyun.com/weixin_45003732/article/details/146567398

1、首先，一般后端会返回该用户的按钮权限有哪些

//假设这是后端返回用户权限的接口
const getLoginUser=function() {
			Api.fetchUser().then((res) => {
		//假设res=['add','delete','edit']
		//那么res中的这些值就是页面中需要显示的按钮，新增  删除  编辑
		//我们需要把这些权限存起来，可以使用localStorage进行存储
        //也可以使用Pinia/Vuex
		 localStorage.setItem('BUTTON_CODE_LIST', res)
		})
	},

2、我们需要在，需要去设置按钮权限的页面，进行判断

<template>
<div>
    <a-button type="primary" @click="add" v-if="hasPermission('add')">新增</a-button>
    <a-button @click="edit" v-if="hasPermission('edit')">编辑</a-button>
    <a-popconfirm title="确定删除？" @confirm="remove(record)" ok-text="确定" cancel-text="取消">
        <a-button v-if="hasPermission('delete')">删除</a-button>
    </a-popconfirm>
</div>
</template>
<script setup lang="ts">
// 获取按钮权限列表
//注意： 这里需要用 JSON.parse() 解析存储的 JSON 字符串,
//并提供一个默认值（空数组 []）以防 BUTTON_CODE_LIST 不存在
const buttonCodeList = ref<any>(
  JSON.parse(localStorage.getItem('BUTTON_CODE_LIST') || '[]'
));

/**
 * 检查是否有权限
 * @param code 
 */
 //这个函数的作用是 检查当前用户是否有某个按钮/操作的权限，
 //它接收一个权限代码 code，并返回 true 或 false，表示用户是否拥有该权限。
 //结合 v-if，可以控制哪些按钮对当前用户可见
 const hasPermission = (code: string) => {
    return buttonCodeList.value.includes(code);
};
</script>

解释一下为什么需要用JSON.parse() 解析：
localStorage 只能存储字符串，所以如果你存的是数组或对象，需要用 JSON.stringify() 转换后存储。读取时需要用 JSON.parse() 转换回原始数据结构。
localStorage.getItem('BUTTON_CODE_LIST') 返回的是一个字符串，而你的 buttonCodeList 应该是一个数组，所以需要JSON.parse() 解析。

这样就可以实现前端按钮级权限的展示或者隐藏了！