React登录后跳转对应子域名首页路由失效问题解决

• 跳转地址错误：react-router-dom的useNavigate仅用于当前域名下的前端路由跳转，传入完整跨域绝对URL时，会将其识别为相对路径拼接在当前路由后，最终生成错误的嵌套地址。
• localStorage跨子域隔离：localStorage默认以完整源（协议+域名+端口）为隔离维度，主域localhost:3000下存储的数据，cbd.localhost:3000等子域默认无权限读取。

1. 修复跳转逻辑 #

跨整域名跳转不能依赖前端路由的跳转方法，直接使用原生window.location做硬跳转即可，同时给工具函数加空值兜底，避免字段不存在时抛出JS错误。
修改全局工具函数：

const getSubdomainHref = function() {
    const storedUser = JSON.parse(localStorage.getItem("user") || '{}')
    // 增加companies字段兜底，避免未登录/数据格式异常时读取length报错
    const companyList = storedUser.companies || []
    let targetOrigin = window.location.origin

    if (companyList.length > 0) {
        targetOrigin = `${window.location.protocol}//${companyList[0].subdomain}.${window.location.host}`
    } 

    return targetOrigin
}

export { getSubdomainHref };

修改登录页核心逻辑，移除useNavigate的跨域跳转用法：

import React, { useEffect } from 'react';
import { getSubdomainHref } from "./../utils";

// 其余业务代码省略

useEffect(() => {
    if (user.user_type !== 'anonymous') {
        const targetUrl = getSubdomainHref()
        // 直接赋值location.href触发整页跨域跳转
        window.location.href = targetUrl
    }
}, [user]);

2. 解决localStorage跨子域访问问题 #

按需选择以下方案即可：

• 通用方案（本地+生产环境可用）：将登录态、用户基础信息存入设置了共享域的cookie中，本地环境设置cookie domain为.localhost，生产环境设置为.你的实际主域名，所有子域均可读取该cookie下的数据。注意敏感信息不要明文存储，优先存服务端签发的鉴权token，子域加载时再通过token拉取完整用户信息即可。
• 本地快速验证方案：跳转时将需要透传的用户信息加密后拼接到目标URL的查询参数中，子域页面初始化时读取URL参数存入自身源下的localStorage，随后清除URL上的敏感参数。该方案不适合生产环境，参数携带敏感信息存在泄露风险。

本地开发注意：需要提前配置本地hosts，将业务用到的所有子域名（比如cbd.localhost）指向127.0.0.1，同时配置dev server允许任意host访问，否则子域名会无法加载本地服务。

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