ASP.NET Core：前后端分离项目中客户端如何使用JWT令牌授权

一、前端（ASP.NET Core MVC）处理流程 #

1. 登录请求与令牌存储 #

用户提交登录信息后，前端调用后端API验证身份并获取令牌，拿到令牌后需存入安全位置，推荐使用HttpOnly Cookie（防XSS攻击）：

[HttpPost]
public async Task<IActionResult> Login(LoginViewModel model)
{
    if (!ModelState.IsValid) return View(model);

    // 调用后端API获取令牌
    using var client = new HttpClient();
    var loginPayload = new { Username = model.Username, Password = model.Password };
    var response = await client.PostAsJsonAsync("https://你的API域名/api/auth/login", loginPayload);

    if (response.IsSuccessStatusCode)
    {
        var tokenRes = await response.Content.ReadFromJsonAsync<TokenResponse>();
        
        // 存入HttpOnly Cookie
        Response.Cookies.Append("JwtToken", tokenRes.Token, new CookieOptions
        {
            HttpOnly = true,
            Secure = Environment.IsProduction(),
            Expires = DateTime.Now.AddMinutes(30),
            SameSite = SameSiteMode.Strict
        });

        return RedirectToAction("Index", "Home");
    }

    ModelState.AddModelError("", "用户名或密码错误");
    return View(model);
}

// 令牌响应模型
public class TokenResponse
{
    public string Token { get; set; }
}

2. 后续请求携带令牌 #

每次调用后端API时，从Cookie取出令牌，放在请求头Authorization中（格式：Bearer {token}），可封装扩展方法统一处理：

public static class HttpClientExtensions
{
    public static void AttachJwtToken(this HttpClient client, HttpContext context)
    {
        var token = context.Request.Cookies["JwtToken"];
        if (!string.IsNullOrEmpty(token))
        {
            client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", token);
        }
    }
}

// 调用示例
public async Task<IActionResult> GetUserInfo()
{
    using var client = new HttpClient();
    client.AttachJwtToken(HttpContext);
    var response = await client.GetAsync("https://你的API域名/api/user/info");
    
    if (response.IsSuccessStatusCode)
    {
        var userInfo = await response.Content.ReadFromJsonAsync<UserInfo>();
        return View(userInfo);
    }
    else if (response.StatusCode == HttpStatusCode.Unauthorized)
    {
        // 令牌失效，跳转登录页
        Response.Cookies.Delete("JwtToken");
        return RedirectToAction("Login", "Account");
    }

    return View("Error");
}

3. 令牌过期处理 #

当API返回401 Unauthorized时，清除本地令牌并跳转至登录页面，提示用户重新登录。

二、后端（Web API）补充配置 #

确保Program.cs中中间件顺序正确，且在需要保护的接口上添加[Authorize]：

// 注册服务顺序：先认证，再授权
builder.Services.AddAuthentication(...);
builder.Services.AddAuthorization();

var app = builder.Build();

// 中间件顺序：UseAuthentication必须在UseAuthorization之前
app.UseAuthentication();
app.UseAuthorization();

app.MapControllers();
app.Run();

保护接口示例：

[ApiController]
[Route("api/[controller]")]
[Authorize]
public class UserController : ControllerBase
{
    [HttpGet("info")]
    public IActionResult GetUserInfo()
    {
        return Ok(new 
        { 
            Username = User.Identity.Name, 
            Role = User.Claims.First(c => c.Type == ClaimTypes.Role).Value 
        });
    }
}

三、安全注意事项 #

• Cookie属性：生产环境必须开启Secure=true（仅HTTPS传输）、HttpOnly=true（禁止JS读取）、SameSite=Strict（防CSRF）
• 令牌有效期：建议设置15-30分钟，如需长期登录可搭配刷新令牌机制
• 跨域配置：前后端域名不同时，后端需配置CORS，允许前端携带Cookie和Authorization头

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