ASP.NET Core 2.0与React集成时登录重定向失效问题咨询

兄弟，你猜得完全没错！问题的核心就是**fetch是专门做数据请求的API，它不会像浏览器页面导航那样自动处理302重定向**——它只会默默跟着重定向去获取登录页的HTML内容，根本不会触发浏览器的页面跳转。这是前后端分离场景里非常常见的坑，给你一套通用的处理方案：

第一步：后端调整API的未授权响应行为 #

API接口和页面路由的未授权处理逻辑要分开：页面请求返回302跳转登录页，API请求直接返回401状态码，把跳转的控制权交给前端。修改Startup.cs里的Cookie认证配置：

services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
    .AddCookie(options => {
        options.LoginPath = "/account/login";
        // 针对API路径返回401而非302
        options.Events = new CookieAuthenticationEvents
        {
            OnRedirectToLogin = context =>
            {
                // 判断当前请求是否是API请求
                if (context.Request.Path.StartsWithSegments("/api"))
                {
                    context.Response.StatusCode = StatusCodes.Status401Unauthorized;
                    return Task.CompletedTask;
                }
                // 非API请求还是正常跳转登录页
                context.Response.Redirect(context.RedirectUri);
                return Task.CompletedTask;
            }
        };
    });

第二步：前端捕获401并手动跳转登录 #

在你的fetch请求逻辑里，先检查响应的状态码，如果是401，就手动构造带ReturnUrl的登录地址，触发浏览器跳转：

let fetchTask = fetch(`api/SampleData/WeatherForecasts?startDateIndex=${ startDateIndex }`)
    .then(response => {
        // 优先检查授权状态
        if (response.status === 401) {
            // 把当前页面的完整路径作为ReturnUrl编码后带上
            const returnUrl = encodeURIComponent(window.location.pathname + window.location.search);
            window.location.href = `/account/login?returnUrl=${returnUrl}`;
            // 抛出错误终止后续的json解析逻辑
            throw new Error('用户未授权，已跳转登录页');
        }
        return response.json();
    })
    .then(data => { 
        dispatch({ type: 'RECEIVE_WEATHER_FORECASTS', startDateIndex: startDateIndex, forecasts: data }); 
    })
    .catch(error => {
        // 这里可以加用户可见的错误提示，比如弹个提示框
        console.error('请求天气数据失败:', error);
    });

第三步：登录组件处理ReturnUrl跳转 #

登录成功后，从URL参数里取出returnUrl，跳转到用户原来想访问的页面：

// 假设这是你的登录成功回调函数
const handleLoginSuccess = () => {
    const urlParams = new URLSearchParams(window.location.search);
    // 如果没有returnUrl，默认跳转到首页
    const returnUrl = urlParams.get('returnUrl') || '/';
    window.location.href = returnUrl;
};

为什么要这么做？ #

因为API的职责是提供数据或返回状态码，而不是控制页面跳转。把页面跳转的逻辑交给前端，既符合前后端分离的设计思想，也能完美避开fetch这类数据API不处理重定向的特性限制。

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