C# MVC中Ajax调用Api删除接口的权限控制问题

我来帮你一步步解决这个问题，主要分前端按钮权限控制、API错误响应处理、前端AJAX错误捕获三个部分：

1. 调整前端按钮的角色可见性 #

根据你的需求，Delete按钮仅对Admin角色显示，Edit按钮对Admin和Manager显示，你现有的代码里把Delete按钮的判断逻辑写混了，修改成这样：

<td>
    <!-- 仅Admin显示Delete按钮 -->
    @if (User.IsInRole("Admin")) {
        <button data-friend-id="@obj.FriendId" class="btn btn-default js-delete">Delete</button>
    }
    <!-- Admin和Manager都能看到Edit按钮 -->
    @if (User.IsInRole("Admin") || User.IsInRole("Manager")) {
        @Html.ActionLink("Edit", "EditFriend", new { id = obj.FriendId }, new { @class = "btn btn-default" })
    }
</td>

这里注意你按钮里的data-friend-id之前用的是@obj.Id，应该改成@obj.FriendId（和Model里的字段对应），避免出现找不到ID的问题。

2. 增强API的授权错误响应 #

你的API已经加了[Authorize(Roles = "Admin")]，但当授权失败时，默认返回的状态码可能不够明确，我们可以主动处理未授权的情况，让前端更容易识别：

// DELETE: api/FriendApi/5
[Authorize(Roles = "Admin")]
[ResponseType(typeof(FriendModel))]
public IHttpActionResult DeleteFriendModel(int id)
{
    // 额外防御性检查（虽然Authorize已经做了校验，这里进一步明确返回结果）
    if (!User.IsInRole("Admin"))
    {
        return StatusCode(HttpStatusCode.Forbidden); // 返回403禁止访问状态码
    }

    FriendModel friendModel = db.friends.Find(id);
    if (friendModel == null)
    {
        return NotFound();
    }
    db.friends.Remove(friendModel);
    db.SaveChanges();
    return Ok(friendModel);
}

3. 前端AJAX添加错误处理逻辑 #

现在你的AJAX只处理了成功的情况，当非管理员（比如通过浏览器控制台强制触发请求）调用删除接口时，会返回401/403状态码，我们需要捕获这个错误，引导用户切换到有权限的账号登录：

@section scripts{
    <script>
        $(document).ready(function () {
            var table = $('#myTable').DataTable();
            $("#myTable .js-delete").on("click", function () {
                var button = $(this);
                // 先弹出确认框，避免误操作
                if (confirm("确定要删除这条记录吗？")) {
                    $.ajax({
                        url: "/api/FriendApi/" + button.attr("data-friend-id"),
                        method: "DELETE",
                        success: function (result) {
                            console.log(result);
                            table.row(button.parents("tr")).remove().draw();
                            alert("删除成功！");
                        },
                        error: function (xhr) {
                            // 处理不同的错误情况
                            if (xhr.status === 401 || xhr.status === 403) {
                                alert("您没有删除权限，请切换到管理员账号登录！");
                                // 如果有登录页面，可以直接跳转：
                                // window.location.href = "/Account/Login";
                            } else if (xhr.status === 404) {
                                alert("要删除的记录不存在！");
                                table.row(button.parents("tr")).remove().draw();
                            } else {
                                alert("删除失败，请稍后重试！");
                            }
                        }
                    });
                }
            });
        });
    </script>
}

额外的安全提示 #

• 永远不要只依赖前端的权限控制，你已经在API层加了[Authorize]，这很好——前端隐藏按钮只是优化用户体验，真正的权限校验必须在后端完成，防止恶意用户绕过前端限制。
• 可以考虑把角色判断封装成HTML Helper扩展方法，比如@Html.HasRole("Admin")，这样代码会更简洁易维护。

内容的提问来源于stack exchange，提问作者Anthino Russo