.NET7+React+Identity Server授权后重定向返回模板URL异常

使用.NET7.0+React+Identity Server身份模板项目开发时，遇到登录重定向异常：访问需授权的页面时，登录成功后未回到触发授权的原具体页面，而是返回模板路径。

示例流程：在允许匿名访问的/user页面跳转至/user/approve/59417a20-0347-4901-943b-534930241adb（带具体用户ID的授权页面），系统跳转至登录页；登录完成后，期望返回/user/approve/59417a20-0347-4901-943b-534930241adb，实际却回到/user/approve/:userId模板路径。

相关配置 #

前端路由配置 #

const AppRoutes = [
  
  {
    path: '/user/approve/:userId',
    requireAuth: true,
    element: <User />
  },
  {
    path: '/user/:userId',
    element: <User />
  },
  {
    path: '/user',
    element: <User />
  },
  {
    path: '/',
    index: true,
    element: <Navigate to='/user' replace />
  },
  ...ApiAuthorzationRoutes
];

服务端通用配置 #

app.UseCors("MyPolicy");

if (app.Environment.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
    app.UseSwagger();
    app.UseSwaggerUI(c =>
    {
        c.SwaggerEndpoint("/swagger/v1/swagger.json", "Users v1");
    });
}
else
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();

app.UseAuthentication();
app.UseIdentityServer();
app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller}/{action=Index}/{id?}");
app.MapRazorPages();

app.MapFallbackToFile("index.html");

app.Run();

CORS配置 #

builder.Services.AddCors(o => o.AddPolicy("MyPolicy", builder =>
{
    builder.AllowAnyOrigin()
           .AllowAnyMethod()
           .AllowAnyHeader();
}));

页面跳转代码 #

import { useNavigate } from "react-router-dom";
...
const navigate = useNavigate();
...
navigate(`/user/approve/${user.id}`)

解决方案 #

1. 前端授权拦截时保存完整原路径 #

在路由守卫（或授权校验逻辑）中，跳转登录页时需传递包含动态参数的完整当前URL作为重定向依据，而非仅路由模板。示例：

const RequireAuth = ({ children }) => {
  const { isAuthenticated } = useAuth();
  const location = useLocation();

  if (!isAuthenticated) {
    // 保存当前完整路径到state中
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  return children;
};

2. 登录成功后使用保存的原路径重定向 #

登录完成后，从location.state中取出之前保存的完整路径进行跳转，避免手动拼接模板路径：

const Login = () => {
  const navigate = useNavigate();
  const location = useLocation();
  // 获取原跳转路径，默认回首页
  const from = location.state?.from?.pathname || "/";

  const handleLogin = async () => {
    // 执行登录逻辑
    await login();
    // 重定向到原触发授权的页面
    navigate(from, { replace: true });
  };

  return <button onClick={handleLogin}>登录</button>;
};

3. 检查Identity Server客户端配置 #

确保Identity Server客户端允许传递重定向参数，且未限制合法的重定向路径：

builder.Services.AddIdentityServer()
    .AddInMemoryClients(new List<Client>
    {
        new Client
        {
            ClientId = "react_app",
            ClientName = "React App",
            AllowedGrantTypes = GrantTypes.Code,
            RedirectUris = { "https://localhost:3000/authentication/login-callback" },
            PostLogoutRedirectUris = { "https://localhost:3000/" },
            AllowedScopes = { "openid", "profile", "api" },
            AllowOfflineAccess = true,
            AllowAccessTokensViaBrowser = true
        }
    });

4. 确认路由匹配优先级 #

当前路由配置中，/user/approve/:userId（更具体的路由）已排在/user/:userId和/user之前，匹配顺序正确，无需调整，但需确保授权逻辑仅作用于/user/approve/:userId路径。

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