리액트 : 로그인 & 회원가입 구현 (axios api 사용)

728x90
반응형

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')};

 

 

끝.

반응형