작은 시작점

로그인 로직

동아리연합회와 협업 프로젝트를 진행하고 있고 그 중 로그인 부분을 진행하고 있다.

이번 로그인은 몇가지 조건이 있다.

- 동아리 사람들만 로그인할 수 있다. (동아리 소속 아닌 사람들은 로그인 자체가 안됨)

- 처음 로그인 하는 동아리원들은 동의 수집 페이지를 거쳐야 한다.

위의 항목들을 만족하지 않으면 에러로 돌아오고 에러 처리를 해줘야 한다.

정리해보면,

로그인 시도(/login)를 했을 때
- 동아리원O, 동의O -> 로그인 성공(200) -> 메인으로 이동
- 동아리원O, 동의X -> 401 에러 -> 동의 항목 페이지로 이동 ->  동의하기(/agree) -> 로그인 재시도(/login) -> 로그인 성공(200)
- 동아리원X -> 400 에러 -> 로그인 불가능

// 로그인
const handleLogin = async () => {
  try {
    console.log(studentInfo)
    const result = await API().post('/login', studentInfo); // 로그인 성공
    console.log(result);
    navigate('/user'); // 사용자 메인으로 이동
  } catch (error) {
    if (error.response) {
      const statusCode = error.response.status;
      if (statusCode === 400) { // 400 : 학번 or 이름 틀렸을 경우
        setFailModalOpen(!failModalOpen);
        setStudentInfo({
          studentId: '',
          name: ''
        });
      } else { // 401 : 개인정보 동의하지 않았을 경우
        setModalOpen(!modalOpen);
      }
    }
  }
};

로그인을 성공했을 때는 navigate로 페이지를 이동 시켜주고

실패했을 때는 에러 코드에 따라 다른 처리를 해주었다.

에러코드 === 400 > 동아리 소속이 아닌사람 (동아리원X)

해당 창이 뜨면서 로그인 실패

에러코드 === 401 > 동아리 소속이지만 동의항목을 거치지 않은 사람(동아리원O, 동의X)

개인정보 수집이용 동의 모달창을 띄워준다.

이후 모달창에서 동의를 누르면 서버(/agree)로 동아리원 정보가 전달되고 서버에서 전달받은 동아리원의 isAgree 항목을 true로 변경함.

// 동의했을 때
const handleAgree = async () => {
    try {
        await API().post('/agree', studentInfo); // 성공적으로 처리되면
        handleLogin(studentInfo); // 다시 로그인 함수 호출
    } catch (error) {
        console.log(error)
    }
}

이후 다시 로그인 재시도(/login)를 하면 동아리원O, 동의O 이므로 로그인 성공(200) !

로그인 성공시 돌아온 토큰 저장

const result = await API().post('/login', studentInfo); // 로그인 성공
    navigate('/user'); // 사용자 메인으로 이동
    localStorage.clear()
    localStorage.setItem('Token', result.data.accessToken)

로그인을 성공하게 되면 서버에서 토큰을 발행해주는데 이 토큰을 어딘가에 저장해두어야 한다.

일반적으로 발행된 토큰은 로컬 스토리지에 저장된다.

localStorage.clear()로 한번 비워주고,

localStorage.setItem(키, 값)의 형태로 돌아온 토큰을 저장하면

잘 저장되는 것을 볼 수 있다 ! 야호