😇 Access token 만료시 재발급하기

제일 골칫덩어리였던 녀석....그래도 마침내 해결했다😂

📌 Access token / Refresh token 만료시 처리 로직

• Axios 요청을 보냈을 때 err.response.data.code가 EXPIRED_TOKEN이면 “토큰이 만료되었습니다”라는 문구가 담긴 모달창을 띄워준다.
• 모달창에서 재발급 버튼을 누르면 현재 access token을 담아서 post 요청을 보낸다.
  • refresh token이 성공적으로 발급된 경우 :
    • response로 받은 refresh token을 다시 localstorage에 저장하고 /home 으로 리다이렉트시킨다.
    • 주의할 점 : window.location.reload()로 새로고침을 꼭 해준다. (이렇게 해야 localStorage.setItem가 확실히 작동된다.)
  • refresh token도 만료된 경우 :
    • localStorage.clear()로 현재 저장되어 있는 만료된 토큰을 제거해준다.
    • 로그인 페이지로 redirect 시킨다.
    • 토큰이 만료되어 자동 로그아웃 되었다는 알림창을 보여준다.

예시 ) 닉네임 설정 페이지에서 토큰 만료 핸들링하기

에러 처리 코드

입력받은 닉네임을 담아서 백엔드에 put 요청을 보내고 에러가 있을 경우 throw error를 해준다.
⭐️ throw error를 하지 않으면 위에서 에러를 제대로 처리할 수 없다.

const putNickName = async () => {
    try {
      const res = await axios.put(
        "https://server.bageasy.net/members/nickname",
        {
          nickname: nickname,
        },
        {
          headers: {
            Authorization: token,
          },
        },
      );
      return res.data;
    } catch (err) {
      console.log(err);
      throw err; // 중요!! 이거 안 넣으면 에러 감지못함
    }
  };

putNickName을 실행해서 error를 캐치해 에러 코드가 "EXPIRED_TOKEN"일 경우 setIsExpired(true)로 설정해준다.
(아래에서 isExpired가 true일 경우 토큰 재발급 모달창을 띄우도록 설정해두었다.)

 const PutNickName = async () => {
    if (nickname.length < 2) {
      setIsFocused(true);
    } else {
      try {
        const data = await putNickName(); // 닉네임 put 요청
        setIsOverlap(false);
        setIsFocused(false);
        setTemp("");
        navigate("/home");
      } catch (err) {
        if (err.response && err.response.data.code === "EXPIRED_TOKEN") {
          // 토큰 만료
          setIsExpired(true);
        } else if (
          err.response &&
          err.response.data.code === "DUPLICATE_NICKNAME"
        ) {
          // 닉네임 중복
          setIsOverlap(true);
          setIsFocused(true);
          setTemp(nickname);
        }
      }
    }
  };

토큰 재발급 모달창에서 재발급 버튼을 클릭하면 현재 access token을 백엔드로 보낸다.

• refresh 토큰이 성공적으로 발급되면 토큰을 다시 저장하고 메인 페이지로 이동한다.
• refresh 토큰도 만료된 경우 저장되어 있는 토큰을 삭제하고 로그인 페이지로 이동시킨다.

// 토큰 재발급
  const RefreshToken = async () => {
    try {
      const res = await axios.post(
        "https://server.bageasy.net/auth/reissue",
        {},
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        },
      );
      console.log(res);

      if (res.status == 200) {
        // 토큰이 성공적으로 발급된 경우
        localStorage.setItem("bagtoken", res.data.accessToken); // 토큰 저장
        handleNavigateHome(); // 메인 페이지로 이동
        window.location.reload(); // 새로고침
      }
      if (res.status == 401) {
        // refresh token도 만료된 경우 -> 다시 로그인 하도록
        localStorage.clear(); // 저장되어 있는 토큰 삭제
        handleNavigateLogin(); // 로그인 페이지로 이동
        window.alert("토큰이 만료되어 자동으로 로그아웃 되었습니다.");
      }
    } catch (err) {
      console.log(err.response);
    }
  };

전체 코드

1. 닉네임 설정 페이지

import styled from "styled-components";
import Arrow from "../assets/GoogleLogin/arrow.png";
import { useNavigate } from "react-router-dom";
import { useState, useEffect, useRef } from "react";
import TokenRefreshModal from "../components/Common/TokenRefreshModal";
import axios from "axios";

const Nickname = () => {
  const [nickname, setNickName] = useState(""); // 닉네임 입력받기
  const [isOverlap, setIsOverlap] = useState(false); // 닉네임 중복 체크
  const [isFocused, setIsFocused] = useState(false); // focus 여부
  const [temp, setTemp] = useState(""); // 현재 입력값이 중복되는지 체크
  const [isExpired, setIsExpired] = useState(false);
  const inputRef = useRef(null); // focus 감지
  const navigate = useNavigate();
  const token = localStorage.getItem("bagtoken");

  const handleNavigateBack = () => {
    navigate(-1);
  };

  const handleNickName = e => {
    setNickName(e.target.value);
  };

  // focus 여부 감지
  useEffect(() => {
    const inputElement = inputRef.current;
    inputElement.addEventListener("focus", () => setIsFocused(true));
    inputElement.addEventListener("blur", () => setIsFocused(false));

    return () => {
      inputElement.removeEventListener("focus", () => setIsFocused(true));
      inputElement.removeEventListener("blur", () => setIsFocused(false));
    };
  }, []);

  const putNickName = async () => {
    try {
      const res = await axios.put(
        "https://server.bageasy.net/members/nickname",
        {
          nickname: nickname,
        },
        {
          headers: {
            Authorization: token,
          },
        },
      );
      return res.data;
    } catch (err) {
      console.log(err);
      throw err; // 중요!! 이거 안 넣으면 에러 감지못함
    }
  };

  const PutNickName = async () => {
    if (nickname.length < 2) {
      setIsFocused(true);
    } else {
      try {
        const data = await putNickName();
        setIsOverlap(false);
        setIsFocused(false);
        setTemp("");
        navigate("/home");
      } catch (err) {
        if (err.response && err.response.data.code === "EXPIRED_TOKEN") {
          // 토큰 만료
          setIsExpired(true);
        } else if (
          err.response &&
          err.response.data.code === "DUPLICATE_NICKNAME"
        ) {
          // 닉네임 중복
          setIsOverlap(true);
          setIsFocused(true);
          setTemp(nickname);
        }
      }
    }
  };

  return (
    <>
      {isExpired && <TokenRefreshModal />} // 모달창 띄우기
      <NickNameContainer>
        <ArrowIcon src={Arrow} onClick={handleNavigateBack} />
        <Copy>닉네임을 입력해주세요!</Copy>
        <Copy2>이후 닉네임 변경이 불가하니 신중하게 결정해주세요.</Copy2>
        <Container>
          <Input
            placeholder="여기에 입력하세요..."
            onChange={handleNickName}
            ref={inputRef}
            color={
              isFocused &&
              (nickname.length < 2 || (isOverlap && nickname === temp))
                ? "T"
                : "F"
            }
          />
          {isFocused && nickname.length < 2 && (
            <Copy3>- 닉네임을 2글자 이상 입력해주세요.</Copy3>
          )}
          {isFocused && isOverlap && nickname === temp && (
            <Copy3>- 중복되는 닉네임입니다.</Copy3>
          )}
        </Container>
        <Btn onClick={PutNickName}>확인</Btn>
      </NickNameContainer>
    </>
  );
};

export default Nickname;

2. 토큰 재발급 모달창

import { styled } from "styled-components";
import ModalBg from "../../assets/modal/modal_bg.png";
import axios from "axios";
import { useNavigate } from "react-router-dom";

const TokenRefreshModal = () => {
  const navigate = useNavigate();

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

  const handleNavigateHome = () => {
    navigate("/home");
  };

  const handleNavigateLogin = () => {
    navigate("/login");
  };

  // 토큰 재발급
  const RefreshToken = async () => {
    try {
      const res = await axios.post(
        "https://server.bageasy.net/auth/reissue",
        {},
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        },
      );
      console.log(res);

      if (res.status == 200) {
        // 토큰이 성공적으로 발급된 경우
        localStorage.setItem("bagtoken", res.data.accessToken); // 토큰 저장
        handleNavigateHome(); // 메인 페이지로 이동
        window.location.reload(); // 새로고침
      }
      if (res.status == 401) {
        // refresh token도 만료된 경우 -> 다시 로그인 하도록
        localStorage.clear(); // 저장되어 있는 토큰 삭제
        handleNavigateLogin(); // 로그인 페이지로 이동
        window.alert("토큰이 만료되어 자동으로 로그아웃 되었습니다.");
      }
    } catch (err) {
      console.log(err.response);
    }
  };

  return (
    <Container>
      <P>인증 토큰이 만료되었습니다. 다시 발급해주세요.</P>
      <Btn onClick={RefreshToken}>재발급</Btn>
      <Modal src={ModalBg} />
    </Container>
  );
};

export default TokenRefreshModal;