Asp.Net Core 6.0 API与Angular14 Session存取返回Null问题

在Angular 14向ASP.NET Core 6.0 REST API提交用户数据时，调用UserSignUp()方法设置Session后，再调用GetSessionData()获取Session数据时，所有之前设置的属性均返回Null。

相关代码 #

控制器GetSessionData方法 #

[HttpGet("GetSessionData")]
public IActionResult GetSessionData() 
{
    var sessionData = new
    {
        Id = HttpContext.Session.GetInt32("Id"),
        UserName = HttpContext.Session.GetString("userName"),
        Role = HttpContext.Session.GetString("role")
    };
    return Ok(sessionData);
}   

UserSignUp POST方法 #

[HttpPost("UserSignUp")]
public IActionResult UserSignUp(UserSignUpModel model)
{
    try
    {
        if (model != null)
        {
            HttpContext.Session.SetInt32("Id", model.Id);
            HttpContext.Session.SetString("userName", model.UserName);
            HttpContext.Session.SetString("role", model.Role);
            new UsersHandler().PostUserSignUp(model.ToEntity());
        }
        return Created(Request.Path, model);
    }
    catch (Exception ex)
    {
        return StatusCode(500, ex);
    }       
}

Angular组件代码 #

signUpData() {
    this.authService.PostUserSignUp(this.signUp).subscribe((response) => {
      // Call the GetSessionData method to retrieve session data
      this.authService.GetSessionData().subscribe(
        (sessionDataResponse) => {
          console.log(sessionDataResponse);
          if (sessionDataResponse && sessionDataResponse.id && sessionDataResponse.userName && sessionDataResponse.role) {
            this.authService.setSessionCookies(sessionDataResponse);
          }
        });
    });
    this.SignUpForm.reset();
  }

Angular服务代码 #

GetSessionData(): Observable<Login>{
    return this.http.get<Login>(this.usersBaseApiUrl + '/GetUserLogin',{ withCredentials : true});
}

setSessionCookies(data:Login) {
    this.cookieService.set('id', data.id.toString());
    this.cookieService.set('userName', data.userName);
    this.cookieService.set('role', data.role);
}

Program.cs配置代码 #

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllers();

builder.Services.AddDistributedMemoryCache();
builder.Services.AddSession(options =>
{
    options.Cookie.IsEssential = true;
    options.IdleTimeout = TimeSpan.FromMinutes(5);
    options.Cookie.HttpOnly = true;
});

builder.Services.AddSwaggerGen();
builder.Services.AddEndpointsApiExplorer();

builder.Services.AddCors(a =>
{
    a.AddDefaultPolicy(
        opt =>
        {
            opt.WithOrigins("http://localhost:4200")
            .AllowAnyMethod()
            .AllowAnyHeader()
            .AllowCredentials();
        });
});

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseSwagger();
    app.UseSwaggerUI();
}
app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseCookiePolicy();

app.UseRouting();

app.UseCors();

app.UseAuthentication();

app.UseAuthorization();

app.UseSession();

app.MapControllers();

app.Run();

解决方法 #

1. 修正API端点路径匹配 #

Angular服务中GetSessionData()方法调用的路径是/GetUserLogin，但控制器中对应的端点是GetSessionData，两者不匹配。修改Angular服务的路径为正确的端点名称：

GetSessionData(): Observable<Login>{
    // 修正路径为/GetSessionData
    return this.http.get<Login>(this.usersBaseApiUrl + '/GetSessionData',{ withCredentials : true});
}

2. 调整ASP.NET Core中间件顺序 #

Session中间件必须在UseAuthentication和UseAuthorization之前启用，否则无法正确关联会话。修改Program.cs中的中间件顺序：

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseCookiePolicy();

app.UseRouting();

app.UseCors();

// 将UseSession移到UseAuthentication之前
app.UseSession();

app.UseAuthentication();

app.UseAuthorization();

app.MapControllers();

3. 确保Post请求携带Credentials #

Angular的PostUserSignUp请求未设置withCredentials: true，导致服务器设置的Session Cookie无法被客户端保存并在后续请求中携带。修改Post请求的配置：

// 在AuthService中补充PostUserSignUp方法的withCredentials配置
PostUserSignUp(model: UserSignUpModel): Observable<any> {
    return this.http.post<any>(this.usersBaseApiUrl + '/UserSignUp', model, { withCredentials: true });
}

4. 验证Session键名一致性 #

确保Session设置和获取的键名完全一致（区分大小写），当前代码中"Id"、"userName"、"role"的键名匹配，无需修改，但需注意后续维护时保持一致。

完成以上修改后，重新启动API和Angular应用，Session数据应该能被正确获取。

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