React 쇼핑몰 클론코딩 : 4. 회원가입, 로그인 유지 구현 (axios로 API 통신)

📝 로그인과 회원가입

로직

JWT토큰 방식을 이용하여 로그인을 구현했다. React-Node.js 간 axios를 이용하여 API 통신을 진행하였다. POST 방식으로 회원가입/로그인에 필요한 정보를 서버로 보내면 서버는 회원가입 시에는 아이디 중복여부를, 로그인 시에는 정보 일치 여부를 확인하여 사용자 정보를 클라이언트에 전달한다. 클라이언트는 서버로부터 전달받은 사용자 정보를 Redux에 저장하여 회원 서비스를 이용 가능하게 한다.

상세코드

로그인 컴포넌트

//LogIn.js

/*생략*/
const [id, setId] = React.useState("");
const [pwd, setPwd] = React.useState("");

/*생략*/

const login = () => {
//입력 값 정합성 체크 후 login API 요청
    if (id === "" || pwd === "") {
      window.alert("아이디와 비밀번호를 입력해주세요.");
      return;
    }
    if (!emailCheck(id)) {
      window.alert("이메일 형식이 맞지 않습니다.");
    }
    dispatch(userActions.loginDB(id, pwd));
  };

/*생략*/

 <Input
            _onChange={(e) => {
              setId(e.target.value);
            }}
            width="380px"
            height="45px"
            placeholder="아이디"
          />
          <Input
            _onChange={(e) => {
              setPwd(e.target.value);
            }}
            width="380px"
            height="45px"
            placeholder="비밀번호"
            type="password"
          />

             

• id와 pwd를 useState로 설정
• 로그인 버튼을 누르면 실행되는 login함수에서는 값이 전부 입력된 상태인지, 정규식 표현으로 만들어둔 이메일 기준에 충족되는 지 여부를 확인한 후 서버로 API 요청을 보낸다.
• 사용자가 값을 입력할 수 있는 input 태그가 화면에 렌더링되고있다.

Redux 모듈 내 API 통신

//user.js (Redux module)

//API통신을 통해 서버에 id,pwd를 제공하고 유저 정보와 토큰을 받아 저장
const loginDB = (id, password) => {
  return function (dispatch, getState, { history }) {
    axios({
      method: "post",
      url: "http://13.125.249.241/user/login",
      data: {
        email: id,
        password: password,
      },
    })
      .then((res) => {
        console.log(res);
        dispatch(
          setUser({
            email: res.data.email,
            nickname: res.data.nickname,
          })
        );
        const accessToken = res.data.token;
        //쿠키에 토큰 저장
        setCookie("is_login", `${accessToken}`);
        document.location.href = "/";
      })
      .catch((error) => {
        console.log(error);
      });
  };
};

//회원가입 API
const signUpDB = (id, password, nickname) => {
  return function (dispatch, getState, { history }) {
    axios({
      method: "post",
      url: "http://13.125.249.241/user/signup",
      data: {
        email: id,
        password: password,
        nickname: nickname,
      },
    })
      .then((res) => {
        window.alert(res.data.result);
      })
      .catch((error) => {
        console.log(error);
      });
  };
};

📝 로그인유지 (자동 로그인)

로직

로그인을 한다고 해서 로그인 상태가 유지되는 것은 아니다. 로그인 시 DB에서 받아온 사용자 정보는 Redux에 저장시켜두기 때문에 리로드가 발생하면 초기화된다. 매번 로그인을 할 수 없기 때문에 페이지에 들어왔을 때 사용자 정보를 다시 넣어주는 작업이 필요하다. 아래 과정에 따라 구현하였다.

• 쿠키에 JWT 토큰이 저장되어 있는 지 확인
• JWT토큰을 서버에 보내 유효성 및 사용자 검증 요청
• 검증 성공 시 서버가 응답한 로그인 정보로 업데이트

상세코드

//Main.js
...
 React.useEffect(() => {
     
     //쿠키에 저장된 액세스 토큰이 존재할 때만 서버에 검증 요청
    if(getCookie("is_login")){
      dispatch(userActions.loginCheckDB());
    }
    
  }, []);
...

//user.js (Redux module)
...
//로그인 유지 API
//서버에서 토큰을 받아 유효성 검증 후 사용자 정보를 내려주어 로그인 상태 유지
const loginCheckDB = () => {
  return function (dispatch, getState, { history }) {
    const token = getCookie("is_login");
    axios({
      method: "post",
      url: "http://13.125.249.241/user/check",
      headers: {
        Authorization: `Bearer ${token}`,
      },
    })
      .then((res) => { 
        dispatch(
          setUser({
            email: res.data.email,
            nickname: res.data.nickname,
          })
        );
      })
      .catch((error) => {
        console.log(error.code, error.message);
      });
  };
};