主な特技の再整備プロジェクト

yarn add jwt-decode // 토큰의 payload 내용을 디코딩해주는 패키지.
yarn add universal-cookie // 쿠키 관련 동작을 할수 있게 해주는 패키지. 이거 없으면 직접 js로 짜야함;;

// module
import Cookies from "universal-cookie";
import jwt_decode from "jwt-decode";
...
const cookies = new Cookies();
...
// action creator
const loginSV = (user_name, pw) => {
  return function (dispatch, getState, { history }) {
    instance
      .post("/user/login", {
      username: user_name,
      password: pw,
    })
      .then((res) => {
      cookies.set("refresh_token", res.data, { sameSite: "strict" });
      const token = cookies.get("refresh_token");
      const decoded = jwt_decode(token);
      dispatch(logIn(decoded.sub));
      history.replace("/");
    })
      .catch((err) => {
      console.log("login error!", err);
    });
  };
};

const loginCheckCK = () => {
  return (dispatch, getState, { history }) => {
    const token = cookies.get("refresh_token");
    const decoded = jwt_decode(token);
    dispatch(checkLogin(decoded.sub));
  };
};

const logoutSV = () => {
  return (dispatch, getState, { history }) => {
    dispatch(logOut());
    history.push("/login");
  };
};

// /shared/Request.js
import axios from "axios";
import Cookies from "universal-cookie";
const cookies = new Cookies();

const instance = axios.create({
  baseURL: "http://118.67.134.8",
});

// 가지고 있는 토큰 넣어주기!
// 로그인 전이면 토큰이 없으니 못 넣어요.
// 그럴 땐 로그인 하고 토큰을 받아왔을 때 넣어줍시다.
const USER_TOKEN = cookies.get("refresh_token");
instance.defaults.headers.common["Authorization"] = USER_TOKEN;

export default instance;