跳到主要内容

7.3 认证、授权与 CORS

认证回答“你是谁”，授权回答“你能做什么”，CORS 回答“浏览器是否允许这个前端访问这个后端”。三者经常一起出现，但解决的问题不同。

学习目标​

  • 能区分认证和授权。
  • 能解释 Cookie 与 JWT 的基本取舍。
  • 能配置 ASP.NET Core CORS 策略。
  • 能设计前端登录态和 API 调用错误处理。

应用场景​

  • 用户登录后查看自己的任务。
  • 管理员可以查看所有用户任务。
  • React 开发服务器调用本地 ASP.NET Core API。
  • Token 过期后前端需要重新登录或刷新令牌。

核心概念​

概念说明
Authentication验证用户身份
Authorization判断用户是否有权限
Claim描述用户身份或权限的信息
CORS浏览器跨域访问控制机制

CORS 配置示例​

builder.Services.AddCors(options =>
{
    options.AddPolicy("Frontend", policy =>
    {
        policy
            .WithOrigins("http://localhost:5173")
            .AllowAnyHeader()
            .AllowAnyMethod();
    });
});

var app = builder.Build();

app.UseCors("Frontend");
app.UseAuthentication();
app.UseAuthorization();

授权示例​

app.MapGet("/me/todos", async (
    ClaimsPrincipal user,
    TodoService service,
    CancellationToken cancellationToken) =>
{
    var userId = user.FindFirstValue(ClaimTypes.NameIdentifier);
    if (userId is null)
    {
        return Results.Unauthorized();
    }

    var todos = await service.GetTodosForUserAsync(userId, cancellationToken);
    return Results.Ok(todos);
}).RequireAuthorization();

重点难点​

  • CORS 是浏览器安全机制，不是后端认证机制。
  • 允许 * 源和携带凭据通常不能同时安全使用。
  • 权限校验必须在后端执行，前端隐藏按钮只是体验优化。
  • Token、Cookie 和刷新机制要考虑 XSS、CSRF 和过期策略。

常见误区​

误区推荐做法
CORS 报错就关闭所有限制明确允许的前端源、方法和 Header
只在前端判断管理员权限后端 API 必须再次授权
把用户 ID 从请求体传入从认证上下文读取当前用户

练习​

  • 为本地 React 开发服务器配置 CORS。
  • 给任务列表接口增加 RequireAuthorization()。
  • 设计 401 和 403 在前端的不同展示逻辑。