#6. 로그인 기능 구현 (1차)

#6-0 들어가는 말

 이전에 포스팅 했던대로(https://white-salt.tistory.com/26) JWT 방식으로 로그인 기능을 구현해보았다. jwt 개념을 이해하는 것도 조금 어려웠는데 실제로 코드 짜는건 더 어려웠다 (^_^;;). 일단 지금까지 짠 코드를 한번 정리 후 백엔드 친구와 회의를 진행해보자.

 

---

#6-1 로그인 기능 로직

이미지 출처: https://maruzzing.github.io

 

1. 아이디와 패스워드를 서버로 전송하여 accessToken과 refreshToken 받기. 

입력받은 id와 password 값을 서버로 보내면, 서버는 유저확인 후 등록된 유저가 맞다면 accessToken, refreshToken을 발급해준다.

(Q1. 이때 발급 받은 refreshToken을 httpOnly cookie로 서버단에서 바로 저장해주고, 이후 클라이언트에선 cookie에 저장된 refreshToken을 필요할 때 가져다 쓰면 되는건가?)

2. 이후 accessToken은 매 Api 호출마다 헤더에 붙여서 전송하고, 서버는 accessToken을 검증한 후 다시 accessToken과refreshToken을 발급해준다.

*HTTP 헤더는 클라이언트와 서버가 요청 또는 응답으로 부가적인 정보를 전송할 수 있도록 해준다.
(Q2. 매번 accessToken 검증 후 받은 두 토큰은 기존과 또다른 새로운 토큰인지? 아님 accessToken이 일치한다는 status 값만 전송해주는지?) 

// LoginPresenter.js
const handleSubmit = (e) => {
  e.preventDefault();
  const id = idData.current.value;
  const password = passwordData.current.value;
  props.onlogin(id, password);
}
  
// LoginController.js
const onlogin = (id, password) => {
    const data = {id, password};
    const headers = {
      'Content-Type': 'application/json'
    };

    axios.post("/login", data, {headers: headers})
    .then((res)=> {
      const {accessToken} = res.data;
      dispatch({type: 'LOGIN_SUCCESS', payload: {"accessToken": accessToken}});

      // API 요청하는 콜마다 헤더에 accessToken 담아 보내도록 설정
      axios.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`;

      history.push("/");
    })
    .catch((error)=>{
      dispatch({type: 'LOGIN_FAILURE'});
      // refreshTokenSaveCookie(id);
      history.push("/login");
      console.log('LOGIN FAILURE');
    })
}

 

3. 만약 accessToken이 만료되었으면 refreshTokenRequest 함수가 실행되어 쿠키에 저장된 refreshToken을 서버에 보내 다시 새로운 accessToken을 발급 받는다. 

새로운 accessToken은 다시 매 Api 호출마다 헤더에 붙여서 전송한다.

(**accessToken이 만료되어 서버에서 400 에러를 보내주면 이를 감지 후 refreshTokenRequest 함수가 실행되도록 코드보안 필요함)
(Q3. 이때 refreshToken도 새로운 값이고 바로 또 서버단에서 쿠키에 저장해주나?)

// auth.js
export const refreshTokenRequest = () => {
  const refreshToken = Cookie.get("refreshToken");
  const data = {
    refreshToken
  };
  const headers = {
    'Content-Type': 'application/json'
  };

  axios.post('/token/refresh', data , {headers: headers})
  .then((res)=>{
    const { accessToken } = res.data;

    // accessToken 설정
    axios.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`;
  })
  .catch(error => {
      console.log('refreshToken error')
  });
}