基于React的SPA集成OpenId认证：页面刷新未跳转登录页求助

我正在使用基于React的SPA并集成OpenId认证。如下方代码所示，尽管已在中间件中调用ChallengeAsync()，但页面刷新时并未重定向到登录页进行用户认证，仅在执行硬刷新（ctrl+F5）时才会触发重定向。请问可能遗漏了什么？

代码示例：

app.UseHttpsRedirection(); // Must go before UseMvc
app.UseAuthentication();
app.Use(async (context, next) => {
    var result = await context.AuthenticateAsync(OpenIdConnectDefaults.AuthenticationScheme);
    context.User = result != null && result.Succeeded ? result.Principal : new ClaimsPrincipal(new ClaimsIdentity());
    if (!context.User.Identity.IsAuthenticated) {
        await context.ChallengeAsync(new AuthenticationProperties {
            IsPersistent = true,
            ExpiresUtc = DateTime.UtcNow.AddHours(int.Parse(CookieExpiryInHours))
        });
    } else {
        await next();
    }
});
app.UseStaticFiles();
app.UseSpaStaticFiles();

我来帮你拆解下这个问题——这种SPA场景下的认证重定向问题其实挺常见的，咱们从几个关键点排查：

1. 错误的认证Scheme用于身份验证 #

你现在用OpenIdConnectDefaults.AuthenticationScheme调用AuthenticateAsync是不对的：OpenID Connect Scheme是用来**发起认证请求（挑战）**的，而用户登录后的会话是通过Cookie认证Scheme维持的。你应该用CookieAuthenticationDefaults.AuthenticationScheme来检查用户是否已登录。

修改示例：

var result = await context.AuthenticateAsync(CookieAuthenticationDefaults.AuthenticationScheme);

（记得引用Microsoft.AspNetCore.Authentication.Cookies命名空间）

2. 手动覆盖context.User干扰默认流程 #

UseAuthentication()中间件已经会自动处理context.User的设置，你手动替换的操作可能会覆盖正确的身份信息，导致后续中间件无法识别用户状态。建议删除这行手动设置代码，直接用context.User判断即可。

3. 调用ChallengeAsync后未终止中间件管道 #

触发ChallengeAsync后，必须立即终止后续中间件执行，否则后面的UseStaticFiles或SPA中间件可能返回index.html，覆盖重定向响应。可以在调用后加上return;：

if (!context.User.Identity.IsAuthenticated) {
    await context.ChallengeAsync(OpenIdConnectDefaults.AuthenticationScheme, new AuthenticationProperties {
        IsPersistent = true,
        ExpiresUtc = DateTime.UtcNow.AddHours(int.Parse(CookieExpiryInHours))
    });
    return; // 终止管道，避免后续中间件干扰
} else {
    await next();
}

注意挑战时要指定OpenID Connect Scheme，确保跳转到正确的登录页面。

4. 中间件顺序的潜在问题 #

确保自定义认证中间件放在UseStaticFiles和UseSpaStaticFiles之后、UseSpa之前：

app.UseHttpsRedirection();
app.UseAuthentication();
app.UseStaticFiles();
app.UseSpaStaticFiles();
// 自定义认证检查中间件放在这里
app.Use(async (context, next) => {
    // 检查认证逻辑...
});
app.UseSpa(spa => {
    spa.Options.SourcePath = "ClientApp";
    // 其他SPA配置
});

这样静态资源可以直接返回，而SPA路由请求会先经过认证检查。

5. SPA客户端路由的影响 #

普通刷新可能被客户端路由处理，但服务器端仍会收到请求。如果前面的问题没解决，就会出现只有硬刷新才触发重定向的情况——硬刷新会强制服务器重新处理整个请求，而普通刷新可能因缓存或中间件顺序问题跳过了认证检查。

整合修改后的示例代码：

using Microsoft.AspNetCore.Authentication.Cookies;
using Microsoft.AspNetCore.Authentication.OpenIdConnect;

// ...

app.UseHttpsRedirection();
app.UseAuthentication();
app.UseStaticFiles();
app.UseSpaStaticFiles();

app.Use(async (context, next) => {
    var result = await context.AuthenticateAsync(CookieAuthenticationDefaults.AuthenticationScheme);
    if (!result.Succeeded) {
        await context.ChallengeAsync(OpenIdConnectDefaults.AuthenticationScheme, new AuthenticationProperties {
            IsPersistent = true,
            ExpiresUtc = DateTime.UtcNow.AddHours(int.Parse(CookieExpiryInHours))
        });
        return;
    }
    await next();
});

app.UseSpa(spa => {
    spa.Options.SourcePath = "ClientApp";
    // SPA配置
});

这样应该就能解决普通刷新时不触发重定向的问题了。

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