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 /
  • ¿Cómo concateno mi encabezado de autorización con httpLink? Utilizando Apollo Client y Next Js.

¿Cómo concateno mi encabezado de autorización con httpLink? Utilizando Apollo Client y Next Js.

05 Aug, 2023 Programación

Estoy trabajando en una aplicación que requiere autenticación para crear publicaciones, así que he creado 2 objetos, httpLink (que actualmente enlaza con mi backend) y authLink (que realiza la función de pasar el encabezado en forma de token Bearer).

Este es mi fragmento de apollo-client.js que maneja esta funcionalidad:

import { ApolloClient, createHttpLink, InMemoryCache } from "@apollo/client";
import { setContext } from "@apollo/client/link/context";

const httpLink = createHttpLink({
    uri: "http://localhost:5000"
});

const authLink = setContext(() => {
    if (typeof window !== 'undefined') {
        token = localStorage.getItem('jwtToken');
    }
    return {
        headers: {
            Authorization: token ? `Bearer ${token}` : "",
        }
    } 
});

const uri = authLink.concat(httpLink);

const client = new ApolloClient({
    link: uri,
    cache: new InMemoryCache(),
});

export default client;

Ahora, si intento usar authLink.concat(httpLink), obtengo este error que el token no está definido, pero en Dev tools>Application>localStorage, muestra que el token todavía es válido.

También estaba obteniendo un error que decía “SyntaxError: Unexpected token < in JSON at position 0”, pero no puedo reproducir este error.

Normalmente, en lugar de error, debería mostrar algunas publicaciones que he insertado manualmente en la base de datos.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el error está ocurriendo porque la variable token no está definida en el contexto de la función setContext. Debes definir la variable token antes de usarla dentro de la función.

    Una forma de hacer esto sería declarar la variable token al principio del archivo, así:

    import { ApolloClient, createHttpLink, InMemoryCache } from "@apollo/client";
import { setContext } from "@apollo/client/link/context";

let token;

const httpLink = createHttpLink({
  uri: "http://localhost:5000"
});

const authLink = setContext(() => {
  if (typeof window !== 'undefined') {
    token = localStorage.getItem('jwtToken');
  }
  return {
    headers: {
      Authorization: token ? `Bearer ${token}` : "",
    }
  }
});

const uri = authLink.concat(httpLink);

const client = new ApolloClient({
  link: uri,
  cache: new InMemoryCache(),
});

export default client;

    Esto permitirá que la variable token se defina dentro de la función setContext y resuelva el error.

    En cuanto al SyntaxError con la respuesta JSON, es posible que haya un problema con el servidor backend devolviendo datos JSON válidos. Es posible que desees revisar el formato de respuesta y asegurarte de que esté correctamente formateado como JSON.

Comments are closed.