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.
Bearer ${token}
a variável token já está definida?