1.로그인 (axios api : post)
const onLoginHandler = async () => {
try {
const response = await axios.post(
`${process.env.REACT_APP_AUTH_SERVER_URL}/login`,
{
id: userid,
password,
},
{
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer `,
},
}
);
//로그인 성공시, accessToken을 localStorage에 저장
const { accessToken, userId, avatar, nickname } = response.data;
setUserid('');
setPassword('');
dispatch(login({ accessToken, userId, avatar, nickname }));
} catch (error) {
console.log(error.response.data.message);
alert(error.response.data.message);
}
};
★ response 변수에 headers를 추가해야 accessToken이 생김
★ response 변수에 withCredentials : true => cors 오류 발생함
1) `${process.env.REACT_APP_AUTH_SERVER_URL}` : .env파일에 서버 url 작성후 가져와서 사용
★ 서버 API_URL 꼭 확인하기..!
2) 로그인 성공시 localStorage에 데이터 저장
=> localStorage.setItem('accessToken', accessToken);
=> 리덕스툴킷을 사용해서 dispatch에서 localStorage에 저장
3) 로그인 하고나서는 저장된 닉네임 값 보여주기
=> localStorage.getItem('accessToken');
4) 비밀번호 또는 정보없는 유저의 경우
: catch문에서 error로 알려주기 (비밀번호가 일치하지 않습니다 or 존재하지 않는 유저입니다)
2. 회원가입 (axios api : post)
const onNewUserHandler = async () => {
try {
const response = await axios.post(`${process.env.REACT_APP_AUTH_SERVER_URL}/register`, {
id: userid,
password,
nickname,
});
setIsMember(true);
} catch (error) {
console.log(error);
}
};
★ 로그인 기능과 유사 & 더 간단
1) 회원가입에 필요한 데이터 넣어주기 (id, password, nickname)
2) 버튼 1개를 로그인 - 회원가입으로 토글 하였기에, setIsMember(true)로 변환 후 => 로그인 버튼으로 변경
3. UI 구현
return (
<BackGround>
<>
<StForm
onSubmit={(e) => {
e.preventDefault();
isMember ? onLoginHandler() : onNewUserHandler();
}}
>
<h2>{isMember ? '로그인' : '회원가입'}</h2>
<input
minLength={4}
maxLength={10}
placeholder="아이디(4~10글자)"
value={userid}
onChange={(e) => setUserid(e.target.value)}
></input>
<input
type="current-password"
minLength={4}
maxLength={15}
placeholder="비밀번호(4~15글자)"
value={password}
onChange={(e) => setPassword(e.target.value)}
></input>
{isMember ? (
''
) : (
<input
minLength={1}
maxLength={10}
placeholder="닉네임(1~10글자)"
value={nickname}
onChange={(e) => setNickname(e.target.value)}
></input>
)}
<div>
{isMember ? (
<LoginBtn type="submit" disabled={userid !== '' && password !== '' ? false : true}>
로그인
</LoginBtn>
) : (
<LoginBtn
type="submit"
disabled={userid !== '' && password !== '' && nickname !== '' ? false : true}
>
회원가입
</LoginBtn>
)}
</div>
<SpanDiv>
<span
onClick={(e) => {
if (isMember) {
setIsMember(false);
} else {
setIsMember(true);
}
}}
>
{isMember ? '회원가입' : '로그인'}
</span>
</SpanDiv>
</StForm>
</>
</BackGround>
);
1) isMember로 회원인지 아닌지 구분 => 로그인화면과 회원가입 화면 토글해서 사용
2) 아이디 / 비밀번호 / 닉네임 글자 제한
: <input>태그의 minLength={4} maxLength={10}
3) 로그인의 경우, 아이디 + 비밀번호 모두 입력되면 버튼 활성화 (색상 하늘색 변경)
: <button> 태그의 disable = true / false로 수정 + styled.component에서 색상 조절
background-color: ${(props) => (props.disabled ? 'lightgray' : '#8dd2ef')};
끝.
