从第二级域与子域的反应途径

Question

我的React网站上有一个登录页面，该网站上有此URL（本地）

http：// localhost：3000/登录

用户登录时，服务器返回有关用户的一堆信息，包括公司列表，每一个具有子域元素。登录时，所有这些数据都将放入本地存储。

我的目标是，当用户登录到网站时，它们将立即重定向到主页，但在从该公司列出的公司列表中，一个子域与从该公司返回的公司列表匹配服务器。

到目前为止，这是一个迄今为止的内容：

1. 此文件是一个全局实用程序文件，我将导入登录页面：

const getSubdomainHref = function() {
    const storedUser = JSON.parse(localStorage.getItem("user") || '{}')
    let newHref = window.location.origin

    if (storedUser.companies.length > 0) {
        newHref = window.location.protocol + '//' + storedUser.companies[0].subdomain + '.' + window.location.host
    } 

    return newHref
}

export { getSubdomainHref };

2. 这是我的登录页面的一部分（重要部分）

import React, { useEffect } from 'react';
import { useNavigate } from "react-router-dom";
import { getSubdomainHref } from "./../utils";

//other code

  useEffect(() => {
    if (user.user_type !== 'anonymous') {
      let newHref = getSubdomainHref()
      navigate(newHref + "/");
    }
  }, [user, navigate]);

这是不起作用的，当我登录时会发生什么。

初始页面：

http：// localhost：3000/登录

结果页面：（注意，返回的子域是'cbd'）

http：// localhost：3000/login/login/http：//cbd.localhost：3000/

我如何制作我这项工作？

请注意，当我写这篇文章时，我只是一个想法，是从“ cbd.localhost”上不易获得的“ localhost”的局部发展问题。我不确定这是否是一个问题，但可能是。

Answer 1

这里的问题是react-router-dom仅处理内部导航。这意味着它只能导航或重定向到同一React应用程序中的URL IE http：// localhost：3000。这就是为什么子域被解释为内部路径并将其附加到当前路径的原因。

如果需要导航到外部URL，则可以使用window.location对象。您可以创建一个单独的组件以进行导航，也可以直接使用它，如下所示：

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


  useEffect(() => {
    if (user.user_type !== 'anonymous') {
      let newHref = getSubdomainHref()
      window.location.href = newHref;
    }
  }, [user]);

Answer 2

米塔尔王子是100％正确的。这是我选择解决问题的方法：

1. 在登录页面上，如果您尚未从正确的子域中登录，将会发生什么是在响应中获得1次使用的用用图令牌，可以在短时间内登录。

2. 一次。

   收到令牌，我将使用window.location.href方法将我的网站重定向到一个特殊页面，我将专门为此目的而制作该网站，该页面将在代币中使用，然后立即将其传递给后端，以便用户可以be重新认可。 URL看起来像这样： http：//subdomain.localhost：3000/redirect/redirect/code

3. 登录用户后，他们将使用普通反应导航方法将其重定向到主页。