Hay una página de inicio de sesión en mi sitio React que tiene esta URL (localmente)
http://localhost:3000/iniciar sesión
Cuando el usuario inicia sesión, el servidor devuelve un montón de información sobre el usuario, incluida una lista de empresas, cada una de las cuales tiene un elemento de subdominio. Todos estos datos se colocan en localStorage al iniciar sesión.
Mi objetivo aquí es que cuando un usuario inicie sesión en el sitio, será redirigido inmediatamente a la página de inicio pero con un subdominio que coincida con la primera empresa en su lista de empresas devueltas desde el servidor.
Esto es lo que tienen hasta ahora:
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 }; 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]);Esto no funciona, lo que sucede cuando inicio sesión es esto.
Página inicial:
http://localhost:3000/iniciar sesión
Página resultante: (nota, el subdominio devuelto es 'cbd')
http://localhost:3000/iniciar sesión/http://cbd.localhost:3000/
¿Cómo puedo hacer que esto funcione?
Tenga en cuenta que, mientras escribo esto, se me ocurrió otra idea: el problema del almacenamiento local de "localhost" no está disponible en "cbd.localhost". No estoy seguro de si esto es un problema todavía, pero podría serlo.
El problema aquí es que react-router-dom solo maneja la navegación interna. Significa que solo puede navegar o redirigir a las URL dentro de la misma aplicación de reacción, es decir, http://localhost:3000 . Y es por eso que el subdominio se interpreta como una ruta interna y se agrega a la ruta actual.
Si necesita navegar a una URL externa, puede usar el objeto window.location . Puede crear un componente separado para la navegación o simplemente usarlo directamente como se muestra a continuación:
import React, { useEffect } from 'react'; import { getSubdomainHref } from "./../utils"; useEffect(() => { if (user.user_type !== 'anonymous') { let newHref = getSubdomainHref() window.location.href = newHref; } }, [user]);Prince Mittal es 100% correcto. Esto es lo que he elegido hacer para resolver el problema:
en la página de inicio de sesión, si aún no está iniciando sesión desde el subdominio correcto, lo que sucederá es que obtendrá como respuesta un token de uso único que se puede usar durante un breve período de tiempo para iniciar sesión.
una vez que se recibe el token, usaré el método window.location.href para redirigir mi sitio a una página especial que crearé específicamente para este propósito que tomará el token y luego lo pasará inmediatamente al backend para que el usuario pueda volver a autenticarse. la URL se verá así: http://subdomain.localhost:3000/redirect/CODE
una vez que el usuario haya iniciado sesión, será redirigido a la página de inicio utilizando el método de navegación normal de reacción.