Auth Boiler Plate View with React,Redux - Signup, Logout
01 May 2021 | Node.js ReactBoiler Plate with React,Redux - Signup, Logout
Signup View Page
이미 로그인때 리덕스 관련 빌드를 다 해놓아서 특별히 크게 바뀌는건 없고 그저 추가가 될 뿐이다
view 페이지도 로그인 때의 로직을 그대로 복붙해서 state, input창 몇 개 더 추가하고 dispatch할 action명을 바꾸면 끝이다
dispatch(registerUser(body)).then((response) => {
if (response.payload.success) {
props.history.push('/login');
} else {
alert('SignUp Fail!');
}
});
action도 회원가입용을 하나 더 추가한다
export function registerUser(dataSubmit) {
const request = axios
.post('/api/users/register', dataSubmit)
.then((response) => {
return response.data;
});
return {
type: actions.REGISTER_USER,
payload: request,
};
}
reducer에 switch 구문의 case에도 회원가입 action을 추가한다
export default function (state = {}, action) {
switch (action.type) {
case actions.LOGIN_USER: // 로그인
return {
...state,
loginSuccess: action.payload,
};
case actions.REGISTER_USER: // 회원가입
return {
...state,
register: action.payload,
};
default:
return state;
}
}
테스트로 회원가입을 시도해본다
회원가입도 잘 되고 로그인도 잘 된다
성공~~🤟
Logout
로그아웃은 더 간단하다
로그인시 이동하는 LandingPage에 button 태그를 하나 파고 onClick 이벤트를 걸어준다. 끝
const onClickHandler = () => {
axios.get('/api/users/logout').then((response) => {
console.log(response.data);
if (response.data.success) {
props.history.push('/');
} else {
alert('Logout Fail!');
}
});
};
<button onClick={onClickHandler}>Logout</button>
미리 서버에서 만들어놓은 로그아웃 api에 axios 요청을 하고 응답받은 데이터로 그에 맞는 액션을 취해주면 된다
정상적으로 작동하는지 콘솔창에 response.data를 찍어보면
success: true가 잘 찍히는 것을 볼 수 있다
성공~~🤟