React中如何仅对拥有ADMIN权限的登录用户展示删除按钮

你当前的写法逻辑是完全正确的，符合React下UI权限控制的常规实现思路，仅需补充几个优化和注意点即可：

核心注意事项（必做） #

• 前端的权限控制仅做UI展示层面的拦截，必须在Spring Boot后端的删除接口层做权限校验：所有删除请求到达后端后，都要校验当前登录用户的authority字段是否为ADMIN，校验通过才允许执行删除操作。因为前端代码完全可以被用户手动篡改，绕过UI层面的隐藏逻辑直接调用删除接口，后端校验才是权限控制的最终防线。

前端实现优化建议 #

1. 增加空值兼容，避免异常
   当前的判断逻辑如果遇到props.user为undefined/null的场景（比如数据还没加载完成、用户未登录的异常场景），直接取authority会抛出JS运行时错误，建议修改为：

const isAdmin = props.user?.authority === "ADMIN";

如果你的项目不支持可选链语法，可以改为：

const isAdmin = props.user && props.user.authority === "ADMIN";

2. 权限判断逻辑抽离复用
   如果项目中多处需要用到管理员权限判断，可以把这段逻辑抽成公共工具函数，避免重复编码，也方便后续统一修改（比如后续新增SUPER_ADMIN角色也需要删除权限时，只需修改一处）：

// 放到公共utils文件中
export const isAdminUser = (user) => {
  return user?.authority === "ADMIN";
}

// 组件中使用
import { isAdminUser } from '@/utils/auth';
const isAdmin = isAdminUser(props.user);

3. 复杂场景下可封装权限组件
   如果项目中有大量需要按权限控制展示的模块，可以封装通用的权限组件，让代码更简洁：

// 封装AdminOnly组件
const AdminOnly = ({ user, children }) => {
  const isAdmin = user?.authority === "ADMIN";
  return isAdmin ? children : null;
}

// 业务组件中使用
<AdminOnly user={props.user}>
  <button className="btn btn-secondary tooltips" data-placement="top" data-toggle="tooltip" data-original-title="Delete"><i className="fa fa-times"></i></button>
</AdminOnly>

4. 删除操作二次校验（可选）
   如果担心用户手动修改DOM渲染出删除按钮触发操作，可以在删除按钮的点击事件中再做一次权限判断，或者直接依赖后端的权限校验即可。

内容的提问来源于stack exchange，提问作者James Smith