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"
/>
//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에 저장시켜두기 때문에 리로드가 발생하면 초기화된다. 매번 로그인을 할 수 없기 때문에 페이지에 들어왔을 때 사용자 정보를 다시 넣어주는 작업이 필요하다. 아래 과정에 따라 구현하였다.
//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);
});
};
};
우아, 감사합니다 ~