ASP.NET Core非SPA应用：JWT登录后如何跳转至主页面？

嘿，针对你这个非SPA的ASP.NET Core应用登录跳转问题，我给你几个实用的解决方案——毕竟普通的window.location跳转是浏览器发起的GET请求，确实没法手动设置请求头，得换个思路把token传递给主页面的请求：

方案1：把Token存入HttpOnly Cookie（最推荐，安全又省心） #

这个方案的核心是让服务器在登录接口返回响应时直接把token写入HttpOnly Cookie，这样后续的页面跳转请求会自动携带Cookie，服务器就能验证身份了，完全不需要前端操心请求头的事。

客户端登录请求处理 #

$.ajax({
    url: '/api/auth/login',
    method: 'POST',
    data: { username: '你的账号', password: '你的密码' },
    success: function(response) {
        // 服务器已经在响应头里设置了Cookie，直接跳转就行
        window.location.replace('/Main');
    },
    error: function() {
        alert('登录失败，请检查账号密码');
    }
});

服务器端登录接口实现 #

[HttpPost("api/auth/login")]
public IActionResult Login([FromBody] LoginRequest loginModel)
{
    // 第一步：验证账号密码的有效性
    var user = _userService.ValidateCredentials(loginModel.Username, loginModel.Password);
    if (user == null)
    {
        return Unauthorized("账号或密码错误");
    }

    // 第二步：生成JWT Token
    var token = _jwtService.GenerateToken(user);

    // 第三步：把Token写入HttpOnly Cookie（关键！）
    Response.Cookies.Append("AuthToken", token, new CookieOptions
    {
        HttpOnly = true, // 防止XSS攻击，前端无法读取
        Secure = true,   // 生产环境必须开启，只在HTTPS下传输
        SameSite = SameSiteMode.Strict, // 防止CSRF攻击
        Expires = DateTime.UtcNow.AddHours(1) // 和Token的过期时间保持一致
    });

    // 也可以把Token返回给前端，供后续Ajax请求用
    return Ok(new { token = token, tokenType = "Bearer" });
}

主页面的身份验证 #

主页面的Action直接从Cookie里读取Token验证即可：

[HttpGet("Main")]
public IActionResult Main()
{
    // 从Cookie中获取Token
    if (!Request.Cookies.TryGetValue("AuthToken", out var token))
    {
        // 没有Token，跳回登录页
        return RedirectToAction("Login");
    }

    // 验证Token的有效性
    var validationResult = _jwtService.ValidateToken(token);
    if (!validationResult.IsValid)
    {
        return RedirectToAction("Login");
    }

    // 验证通过，传递用户信息到视图
    ViewData["CurrentUser"] = validationResult.User;
    return View();
}

后续的Ajax请求如果需要用请求头带Token，可以在主页面渲染时把Token从Cookie里读出来注入到全局变量：

<script>
// 从Cookie中解析Token（这里需要一个简单的Cookie解析函数）
function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
}

window.authToken = getCookie('AuthToken');
window.tokenType = 'Bearer';
</script>

之后Ajax请求就可以用这个全局变量设置请求头了：

$.ajax({
    url: '/api/data',
    headers: { 'Authorization': `${window.tokenType} ${window.authToken}` },
    // ...其他配置
});

方案2：把Token作为查询参数传递（简单但注意安全） #

如果不想用Cookie，也可以在跳转时把Token编码后放在主页面的URL查询参数里，服务器端读取后验证，再把Token转存到Cookie或者Session里。

客户端跳转代码 #

$.ajax({
    url: '/api/auth/login',
    method: 'POST',
    data: { username: '你的账号', password: '你的密码' },
    success: function(response) {
        // 对Token进行URL编码，避免特殊字符问题
        const encodedToken = encodeURIComponent(response.token);
        const encodedTokenType = encodeURIComponent(response.tokenType);
        // 跳转到主页面并携带参数
        window.location.replace(`/Main?token=${encodedToken}&tokenType=${encodedTokenType}`);
    }
});

服务器端主页面处理 #

[HttpGet("Main")]
public IActionResult Main(string token, string tokenType)
{
    if (string.IsNullOrEmpty(token))
    {
        return RedirectToAction("Login");
    }

    // 验证Token
    var validationResult = _jwtService.ValidateToken(token, tokenType);
    if (!validationResult.IsValid)
    {
        return RedirectToAction("Login");
    }

    // 验证通过后，建议把Token转存到HttpOnly Cookie，避免后续请求再带查询参数
    Response.Cookies.Append("AuthToken", token, new CookieOptions
    {
        HttpOnly = true,
        Secure = true,
        SameSite = SameSiteMode.Strict,
        Expires = DateTime.UtcNow.AddHours(1)
    });

    return View();
}

⚠️ 注意：查询参数会显示在浏览器地址栏和服务器日志里，属于敏感信息，必须在HTTPS环境下使用，并且验证后尽快转存到更安全的存储方式。

方案3：用隐藏表单POST跳转（适合传递敏感信息） #

如果不想把Token暴露在URL里，可以创建一个隐藏的表单，把Token作为表单字段提交到主页面的POST接口，验证后再重定向到GET的主页面。

客户端代码 #

$.ajax({
    url: '/api/auth/login',
    method: 'POST',
    data: { username: '你的账号', password: '你的密码' },
    success: function(response) {
        // 创建隐藏表单
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '/Main/PostLogin';

        // 添加Token字段
        const tokenInput = document.createElement('input');
        tokenInput.type = 'hidden';
        tokenInput.name = 'token';
        tokenInput.value = response.token;

        // 添加TokenType字段
        const tokenTypeInput = document.createElement('input');
        tokenTypeInput.type = 'hidden';
        tokenTypeInput.name = 'tokenType';
        tokenTypeInput.value = response.tokenType;

        // 提交表单
        form.appendChild(tokenInput);
        form.appendChild(tokenTypeInput);
        document.body.appendChild(form);
        form.submit();
    }
});

服务器端处理 #

[HttpPost("Main/PostLogin")]
public IActionResult PostLogin(string token, string tokenType)
{
    // 验证Token逻辑和之前一致
    if (string.IsNullOrEmpty(token))
    {
        return RedirectToAction("Login");
    }

    var validationResult = _jwtService.ValidateToken(token, tokenType);
    if (!validationResult.IsValid)
    {
        return RedirectToAction("Login");
    }

    // 存入Cookie
    Response.Cookies.Append("AuthToken", token, new CookieOptions
    {
        HttpOnly = true,
        Secure = true,
        SameSite = SameSiteMode.Strict,
        Expires = DateTime.UtcNow.AddHours(1)
    });

    // 重定向到GET的主页面，避免刷新重复提交表单
    return RedirectToAction("Main");
}

[HttpGet("Main")]
public IActionResult Main()
{
    // 从Cookie读取Token验证，逻辑同方案1
    if (!Request.Cookies.TryGetValue("AuthToken", out var token))
    {
        return RedirectToAction("Login");
    }

    var validationResult = _jwtService.ValidateToken(token);
    if (!validationResult.IsValid)
    {
        return RedirectToAction("Login");
    }

    return View();
}

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