es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Advertencia: Se esperaba que el servidor HTML contuviera un nodo de texto coincidente para “Bearer…”.

Advertencia: Se esperaba que el servidor HTML contuviera un nodo de texto coincidente para “Bearer…”.

27 Jul, 2023 Programación

Usando NextJS: Estoy tratando de obtener el token de acceso en mi componente de página de inicio de sesión después del inicio de sesión (consultando mi punto final de inicio de sesión), que proviene del contexto global de mi aplicación (API de contexto de React). Funciona, pero obtengo este error en la consola. Supongo que esto se debe a la desconexión entre la información en el servidor y en el lado del cliente. ¿Sabes cómo puedo deshacerme de este error?

PROVEEDOR DE CONTEXTO:

const [token, setToken] = useState(typeof window !== "undefined" ? localStorage.token : "")
const [loginCredentials, setLoginCredentials] = useState({
    email: "",
    password: "",
});

const login = async () => {
    const res = await fetch("http://localhost:3000/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        user: {
          email: loginCredentials.email,
          password: loginCredentials.password,
        },
      }),
    });
    if (res.ok) {
      console.log(res.headers.get("Authorization"));
      localStorage.setItem("token", res.headers.get("Authorization"));
      return res.json();
    } 
};

COMPONENTE DE INICIO DE SESIÓN

const ctx = useAppContext(AppContext);
const { loginCredentials, setLoginCredentials, login, token } = ctx;

Soy nuevo en NextJS y en el desarrollo web en general. ¡Gracias!

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El error que estás recibiendo probablemente se debe a que el objeto localStorage no está disponible en el lado del servidor y, por lo tanto, no se puede acceder durante el renderizado en el lado del servidor. Una forma de evitar este error es verificar si localStorage está disponible antes de intentar acceder a él.

    Una posible solución es modificar la inicialización del estado token en el proveedor de tu contexto para verificar si window está definido antes de acceder a localStorage:

    const [token, setToken] = useState(() => {
  if (typeof window !== 'undefined') {
    return localStorage.getItem('token') || '';
  }
  return '';
});

    De esta manera, durante el renderizado en el lado del servidor, el estado token se inicializará con una cadena vacía y se actualizará tan pronto como el componente se monte en el lado del cliente y localStorage esté disponible.

    Otra solución es establecer el estado token como una cadena vacía durante el renderizado en el lado del servidor y luego obtener el token desde el servidor utilizando un useEffect asincrónico cuando el componente se monta en el lado del cliente:

    const [token, setToken] = useState('');

useEffect(() => {
  async function fetchToken() {
    const res = await fetch('/api/token');
    const data = await res.json();
    setToken(data.token);
  }

  fetchToken();
}, []);

    En este caso, necesitarías crear un punto final en tu servidor que devuelva el token de autenticación y reemplazar /api/token con la URL del punto final correspondiente.

    Espero que esto te ayude. Déjame saber si tienes alguna otra pregunta.

Comments are closed.