u/gbrochacabral

Gente, queria compartilhar uma descoberta que provavelmente pra muita gente aqui é básico, mas pra mim foi uma descoberta muito boa.

Eu tava construindo um helpdesk em React e em toda requisição autenticada eu repetia essa belezinha:

const token = localStorage.getItem("token"); axios.get("http://localhost:3000/called/", {   headers: { Authorization: `Bearer ${token}` }, });

Aí descobri os interceptors do axios. Centralizei tudo em um arquivo só:

import axios from "axios";

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

// Injeta o token automaticamente em toda requisição
api.interceptors.request.use((config) => {
  const token = localStorage.getItem("token");
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// Token expirou? Desloga e manda pro login
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      localStorage.removeItem("token");
      localStorage.removeItem("user");
      window.location.href = "/";
    }
    return Promise.reject(error);
  }
);

export default api;

Agora qualquer componente fica assim:

import api from "./services/api";

const res = await api.get("/called/");

Só isso. Sem Authorization,e sem Bearer, sem http://localhost:3000 repetido, sem tratar 401 em cada tela. Se alguém tiver dicas de outras coisas "óbvias" que iniciantes costumam não saber (tipo isso), manda aí. Tô no modo absorver tudo. 🙏

Tô desenvolvendo um sistema de abertura de chamados, projeto pequeno pra fechar no mesmo dia. Stack: React no front, Node.js no back e PostgreSQL como banco.

Vai ter dois papéis de usuário — cliente e atendente — com login e autenticação completos.

Por enquanto é isso, ainda no início. Bora ver como fica.