[ React ] JWT 토큰

 

1. 로그인 할 때 토큰을 로컬스토리지에 저장

 const onClickLogin = (event) => {
    event.preventDefault();
    axios
      .post(`/api/comm/user/signin`, {
        id: id,
        password: pw,
      })
      .then((response) => {
        console.log(response);
        localStorage.clear();
        localStorage.setItem("token", response.data.token);
        navigate("/");
      })
      .catch((error) => {
        console.log(error);
      });
  };

 

백엔드에서 data에 id, token, verified를 담아 보내주기 때문에, token을 로컬 스토리지에 저장해준다. 

로그인이 성공하면 초기화면으로 돌아간다. 

 

token을 저장해주었으니, 이제 api 날릴 때 token 확인해줘야한다. 

 

 

2. token을 요청의 헤더에 담아서 전달 

import axios from "axios";

const TOKEN = localStorage.getItem("token");

// axios 인스턴스 생성
const axiosServices = axios.create({
  baseURL: "http://localhost:3000",
  headers: {
    "Content-Type": "application/json",
    Authorization: `${TOKEN}`,
  },
});

// 요청 인터셉터
axiosServices.interceptors.request.use(
  (config) => {
    // 헤더에 엑세스 토큰 담기
    const token = localStorage.getItem("token");
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default axiosServices;

https://klloo.github.io/react-login-jwt/

리액트에서 jwt 기반 로그인 구현하기

 

3. 호출

import axiosServices from "../../../utils/axios";

(생략)

const onClickSearch = (event) => {
    axiosServices
      .get(`/api/stock/code/${stckNm}`)
      .then((response) => {
        setCodeList(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  };

 

axios 호출했던거랑 똑같이 호출해주면 된다.