선생님 추가로 맨 처음 질문에서의 사진처럼 구현했다가 선생님 말씀듣고 다시 아래 사진처럼 컴포넌트에서 ajax요청하고, 결과를 디스패치만하는식으로했는데요,
불가피하게 axios안에 axios를 쓰게됬는데 이런식으로 해도 괜찮나요?..
const handleSubmit = (e) => {
e.preventDefault();
if (!userId || userId === '') {
inputRef.current[0].focus();
return setMessage('유저 아이디를 입력해주세요!');
}
if (userId.length < 4) {
inputRef.current[0].focus();
return setMessage(`아이디가 너무 짧아요! (최소 4글자)`);
}
if (userId.length > 12) {
inputRef.current[0].focus();
return setMessage(`아이디가 너무 길어요! (최대 12글자)`);
}
if (!password || password === '') {
inputRef.current[1].focus();
return setMessage('비밀번호를 입력해주세요!');
}
axios({
method: 'post',
url: '/api/auth/login',
data: {
userId,
password,
},
})
.then((res) => {
if (res.data?.token) {
localStorage.setItem('token', JSON.stringify(res.data.token));
setAuthToken(JSON.parse(localStorage.token));
axios
.get('/api/auth')
.then((res) => dispatch(loadUser(res.data.user), navigator('/')));
}
})
.catch((err) => {
console.log(err.response.data.errors);
setMessage(err.response.data.errors[0].msg);
});
};
왜 이렇게 됬냐면..
저는 쿠키에 토큰을안넣고 프론트에서 헤더에 토큰을담아서 서버에보내주면 서버는 그걸 기반으로 유저를 찾고 유저정보를 유저한테 보내는식으로 구현을했어요
그러다보니 이렇게됬는데.. 상관없나염?
