1

estou tentando fazer uma Autorização de usuário utilizando Typescript e estou tendo esse erro "Property 'Authorization' does not exist on type 'HeadersDefaults" na seguinte parte do front:

const api = axios.create({
    baseURL: "http://localhost:3001",
});

api.defaults.headers.Authorization = `Bearer ${token}`

Essas linhas são executadas quando o usuário faz o login, ele precisa que esse token seja armazenado no headers para que consiga cadastrar novos usuários, pois essa rota de cadastro é protegida.

A validação no backend está da seguinte forma:

interface Tokent {
    id: String;
    iat: number;
    exp: number;
}

export default function authMiddleware(req: Request, res: Response, next: NextFunction) {
    const { authorization } = req.headers;

    if (!authorization) {
        return res.status(401).json({ error: "Token was not provided" });
    }

    const token = authorization.replace("Bearer", "").trim();

    try {
        const data = jwt.verify(token, "abc123");
        const { id } = data as Tokent ;
        req.userId = id;
        return next();
    } catch (error) {
        return res.status(401).json({ error: "Invalid token" });
    }
}

Para contornar o problema eu tentei usar api.defaults.headers.common["Authorization"] = `Bearer ${token}`; mas não adiantou, o backend enviava uma mensagem falando que o "Token was not provided", o req.headers.authenticated retorna um undefined

Também tentei extender HeadersDefaults, mas dava o mesmo erro de undefined

interface CommonHeaderProperties extends HeadersDefaults {
   Authorization: string;
 }

 api.defaults.headers = {
   Authorization: `Bearer authToken`
 } as CommonHeaderProperties;

Usando o Insomnia eu consigo acessar a rota protegida normalmente, o problema está no front que não está setando o token.

Como exatamente eu consigo setar esse headers.Authorization para que o back consiga ler? Eu sei que pelo JavaScript era só utilizar a linha api.defaults.headers.Authorization = `Bearer ${token}`; mas no typescript é bem mais complicado.

Obrigado.

1
  • tem certeza de que no momento em que seta o Bearer ${token} a variável token já está definida?
    – Kohi
    Commented 31/05/2022 às 2:37

1 Resposta 1

1

Quando você seta o token no defaults do axios, a variável token tem de estar definida no momento da instância, caso contrário as demais requisições sempre terão o valor undefined (ou null) da variável token em seu header Authorization.

Recomendo que coloque a lógica que recupera o valor do token (seja do cookie, localStorage ou da forma em que está guardando) em um interceptor, assim o token só será consultado logo antes de fazer a requisição, e não somente na instância do axios.

Com um interceptor ficaria:

const api = axios.create({
    baseURL: "http://localhost:3001",
});
api.interceptors.request.use((config) => {
    const token = // Recupere o token aqui;
    config.headers.Authorization = `Bearer ${token}`
    return config;
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .