Angular对接ASP.NET默认认证后后端无法获取已登录用户ID问题

安全阿岳

2026-9-25

问题根因

ASP.NET Core Identity 默认基于 Cookie 实现身份认证，Swagger 测试时属于同域请求，浏览器会自动携带登录后返回的认证 Cookie；但 Angular 发送跨域请求时默认不会携带凭据，导致后端无法识别登录状态，所以获取到的用户 ID 为空，触发空值转换报错。

修复步骤

1. 前端Angular配置

所有和后端交互的HTTP请求都需要开启withCredentials，让浏览器自动携带认证Cookie：

公共请求配置统一增加withCredentials: true，比如你UserService里的generateHeaders方法修改为：

private generateHeaders = () => {
  return {
    headers: new HttpHeaders({
      "Content-Type": "application/json",
    }),
    withCredentials: true // 新增这行开启凭据携带
  };
};

同理你的SharedService里所有调用HttpClient的方法（createRecipe、getRecipes、deleteRecipe等），都要在请求选项里加withCredentials: true，建议抽公共请求配置避免漏加。

2. 后端ASP.NET配置

2.1 修正CORS策略

跨域场景下要允许凭据传输，不能使用通配符源，需明确指定前端地址，以.NET 6+的Program.cs为例：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAngularApp", policy =>
    {
        // 替换为你Angular前端的实际访问地址，不能用*
        policy.WithOrigins("http://localhost:4200") 
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials(); // 必须开启允许凭据
    });
});

2.2 修正中间件顺序

确保CORS中间件在认证、授权中间件之前启用，顺序错误会导致认证失效：

app.UseRouting();
app.UseCors("AllowAngularApp"); // CORS要放在认证前面
app.UseAuthentication();
app.UseAuthorization();

3. 可选优化（避免同类错误）

给需要登录的接口加[Authorize]特性，比如你的CreateRecipe接口，未登录的请求会直接返回401，不会走到后续逻辑触发500错误。
优化用户ID获取逻辑，增加空值判断：

[HttpPost]
[Authorize] // 新增登录校验
public async Task<IActionResult> CreateRecipe(RecipeDto recipeDto)
{
    var userIdStr = User.FindFirstValue(System.Security.Claims.ClaimTypes.NameIdentifier);
    if (string.IsNullOrEmpty(userIdStr)) return Unauthorized();
    var userId = int.Parse(userIdStr);
    recipeDto.UserId = userId;
    await _recipeService.CreateRecipe(recipeDto);
    return CreatedAtAction(nameof(GetRecipeById), new { Id = recipeDto.Id }, recipeDto);
}

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