회원가입 시 고유한 토큰 저장을 로컬스토리지를 쓰고도 해결했던 방법

프로젝트 개발 중 생각한 방식!

여러 개의 계정을 개시할 때 복잡해지는 경우가 많은데, 특히 같은 브라우저에서 다른 계정을 개시할 때 고유한 정보가 남아있으면 문제가 될 수 있다.

특히, 회원가입 후가 되도 기존의 토큰이 공유되면, 새로 개시된 계정이 기존 사용자로 로그인 되는 문제가 발생할 수 있다.

현재 발생하는 문제: 회원가입후 여전한 결과

현재 회원가입을 한 후, localStorage에 고유되는 토큰이 보이고 있는 경우가 많다.

회원가입 성공: {message: '요청에 성공했습니다.'}
apiClient.jsx:17 🔑 ACCESS-AUTH-KEY: eyJhbGciOiJIUzI1NiJ9...
apiClient.jsx:18 🔄 REFRESH-AUTH-KEY: eyJhbGciOiJIUzI1NiJ9...

이 경우, 회원가입만 했을 뿐인데도 이전 사용자의 accessToken과 refreshToken이 경우에 복합되어 있어서 문제가 되는 경우에 해당한다.

해결 방법: 회원가입 후 기존 토큰 삭제

회원가입 시 기존 토큰을 삭제하면, 새로운 계정을 개시할 때 개발자에게 더 보통적인 테스트 클릭을 제공할 수 있다.

export const signup = async (username, email, password) => {
  try {
    // ✅ 회원가입 전, 기존 로그인 정보 삭제
    localStorage.removeItem('token');
    localStorage.removeItem('refreshToken');
    localStorage.removeItem('userId');

    const response = await apiClient.post('/auth/signup', {
      username,
      email,
      password,
    });

    console.log('✅ 회원가입 성공:', response.data);

    return response.data;
  } catch (error) {
    console.error('📌 회원가입 요청 실패:', error.response?.data || error.message);
    throw error;
  }
};

결론 : 로컬스토리지를 써서 토크나이징을 할때 고유하게 저장하려면

1. 회원가입 후 기존 토큰 삭제: 새로운 계정을 복합하지 않고, 보유를 보정.
2. 자유로 로그인 원하면 API 호출하여 토큰 반환: 회원가입 후 자동 로그인 원하면 API 호출 후 localStorage 에 복합하는 방법으로 결과 발생.