로그인 (리액트 쿠키)

컴포넌트화 (필수x)

import { Cookies } from "react-cookie"

const cookies = new Cookies()

export const setCookie = (name: string, value: string, option?: any) => {
  return cookies.set(name, value, { ...option })
}

export const getCookie = (name: string) => {
  return cookies.get(name)
}

 

컴포넌트화 안 할 경우

 

쿠키에 저장

컴포넌트화 했을 경우

const jwtToken = await signIn(signInPayload)
if (jwtToken) {
  setCookie('myToken', token, {
    path: "/",
    secure: true,
    sameSite: "none",
  })
}

컴포넌트화 안 했을 경우

 

export const __login = createAsyncThunk(
  "LOGIN_TODO",
  async (loginInfo, thunkAPI) => {
    try {
      const login = await instance.post("/user/login", {
        account: loginInfo.account,
        password: loginInfo.password,
      });
      // 토큰 선언
      const accessToken = login.data.accessToken;
      // 쿠키 저장 (백엔드에서 다 넘겨주는 경우 option설정할 필요 없음)
      cookie.set("token", accessToken);

 

쿠키 불러오기

인스턴스 안 쓸 경우

const loaded_data = await axios.get(`http://3.39.25.179:8080/api/main?page=${payload.currentPage}&size=8&sortBy=postId&isAsc=${payload.isAsc}`, {
                headers: {
                    Authorization : `Bearer ${payload.token}`
                }});

인스턴스 쓸 경우

const getCookie = cookie.get("token");
instance.interceptors.request.use((config) => {
  config.headers.authorization = `Bearer ${getCookie}`;
  return config;
});

 

쿠키 삭제

  const deleteTokenHandler = () => {
    cookie.remove('token', { path: '/' })
    alert('로그아웃되었습니다.')
  }