원티드 프리온보딩 사전과제 auth.js 리팩토링

 

👆 구현한 auth 페이지 움짤

 

 

 

 

 

  const [info, setInfo] = useState({
    userId: '',
    userPassword: '',
  });

  const onChangeinfo = e => {
    const { name, value } = e.target;
    setInfo({ ...info, [name]: value });
  };

  const passed = info.userId.includes('@') && info.userPassword.length >= 8;

  const toAuth = async e => {
    const sign = isSelectSignUp ? API.SignUp : API.SignIn;

    const config = {
      email: info.userId,
      password: info.userPassword,
    };

    e.preventDefault();
    try {
      const { data } = await axios.post(sign, config);

      if (data.access_token) {
        localStorage.setItem('token', data.access_token);
        alert('로그인 성공');
        navigate('/todo');
      }
    } catch (err) {
      alert('로그인에 실패했습니다');
    }
  };

  useEffect(() => {
    if (localStorage.getItem('token')) {
      navigate('/todo');
    }
  }, [navigate]);

 

👆 리팩토링한 코드!

 

 

 

로그인 / 회원 가입 페이지 같은 페이지에서 구현했으며 상위 컴포넌트로 User.js 를 두었다

 

const User = () => {
  const location = useLocation();
  const currentURL = location.pathname;
  const isSelectSignUp = currentURL === '/signup';

  return (
    <Auth
      contents={isSelectSignUp ? SIGNUP_DATA : SIGNIN_DATA}
      isSelectSignUp={isSelectSignUp}
    />
  );
};

export default User;

const SIGNIN_DATA = {
  title: '로그인',
  buttonText: '로그인하기',
  toGobutton: '회원가입하기',
  url: '/',
};
const SIGNUP_DATA = {
  title: '회원가입',
  buttonText: '회원가입하기',
  toGobutton: '로그인하기',
  url: '/signup',
};

 

url를 통해 isSelectSignUp 이 true 이면 회원가입창('/signup')으로 false면 ('/')로 회원가입/로그인을 나누었다.

auth 페이지는 간단하게 로그인/회원가입 API 둘 다 response로 token을 받아온다는 점을 이용해서 fetch를 합쳤다.

 

그리고 auth 페이지에 접근했을 때 토큰 여부를 통해 바로 '/todo' 로 가는 로직에서 블로커가 생겼는데

 

 

 

 

블로커

 

  useEffect(() => {
    if (localStorage.getItem('token')) {
      navigate('/todo');
    }
  }, []);

 

이 로직과

 

 

todos.js의

  useEffect(() => {
    TodoAxios.GET(navigate, setTodos);
  }, []);

const access_token = localStorage.getItem('token');
const config = {
  headers: { Authorization: 'Bearer ' + access_token },
};

export const TodoAxios = {
  GET: async (navigate, setTodos) => {
    if (!access_token) {
      navigate('/');
    } else {
      try {
        const { data } = await axios.get(API.Todo, config);
        setTodos(data);
      } catch (err) {
        throw new Error(err);
      }
    }
  },
  ...

 

에서 충돌이 일어나

('/todo') 로 페이지 이동을 할 수 없었다 :(

 

TodoAxios.js 에서 access_token을 console 찍어보니 null 값이 나왔는데

token을 발급 받기 전에 TodoAxios.GET이 읽혀 access_token 값이 null 인 채로 함수가 실행되는 듯 했다

 

 

 

해결 

 

const access_token = () => localstorage.getItem('token')

 

이는 순서의 문제이기 때문에 access_token을 함수형으로 바꾸어 axios 안에서 실행되게 만들었다.

 

아쉬운 점이 있다면 전역에 헤더(access_token)을 담은 config 변수도 axios 안에 넣어야 한다는 것

재사용하기 위해 config로 전역에 뺐던 건데 모든 axios안에 넣어주어야했다 😂

 

찾아보면 더 좋은 방법이 있을 거 같은데

내일 프리온보딩 수업이 있기 때문에 여기까지 하는 걸로...!

 

1주차 수업에 사전과제 코드 리뷰가 있는데

코드는 늘 아쉬움이 남지만 그래도 이번 리팩토링으로 좀 더 좀 더 알찬 리뷰를 받을 수 있을 거 같아 뿌듯하다 😊

기대되면서도... 무서운 코드리뷰

 

그래도 성장하는 과정이라 생각하면 즐겁다

화이팅! 💪

 

 

:)

 

 

 

 

 

 

 

 

 

👇 관련 깃헙 레포 주소

 

https://github.com/Joeunji0119/wanted-pre-onboarding-frontend

GitHub - Joeunji0119/wanted-pre-onboarding-frontend