리액트 - JWT를 이용한 로그인 구현

 

이전 포스팅: 

2024.07.31 - [Develope/REACT] - React - 로그인 페이지 구현을 위한 route 경로 설정

React - 로그인 페이지 구현을 위한 route 경로 설정

 

관리자용 사이트를 만들기 위한 로그인 구현 방법을 알아보자

 

1. 로그인 정보를 입력할 input과 핸들링을 추가한다.

const [user, setUser] = useState({
    userId: '',
    userPw: ''
})
const onChangeHandle = (e) => {
    const {name, value} = e.target
    setUser({
        ...user,
        [name]: value
    })
}

// 로그인 버튼 클릭 시 화면 이동
const navigate = useNavigate();
const handleLogin = () => {
    navigate('/app'); // 로그인 후 기본 경로
};

<input type='text' className='mb-2' name='userId' value={user.userId} onChange={onChangeHandle} onKeyDown={handleBtn} placeholder='ID'/>
<input type='password' className='mb-4' name='userPw' value={user.userPw} onChange={onChangeHandle} onKeyDown={handleBtn} placeholder='PassWord'/>
<button type='button' className='confirmLogin btn' onClick={loginInfo}>Login</button>

 

input 아이디와 비밀번호의 value 값을 onChange를 이용해 입력된 값으로 state 값을 넣는다.

전에 정해 놓은 경로로 버튼 클릭 시 navigate를 이용하여 로그인한다.

 

2. JWT 로그인을 위해 서버를 호출한다.

const loginInfo = async () => {
    const loginResult = await axios.post("/login", {
        login_id: user.userId,
        login_pw: user.userPw 
    })
}

 

login_id와 login_pw는 로그인을 위한 파라미터로 입력된 input value에 맞게 state값이 적용 된다.

 

3. 개발자도구 네트워크에서 확인한 정보를 토대로 로그인 성공과 실패 로직을 작성한다.

const loginInfo = async () => {
    const loginResult = await axios.post("/login", {
        login_id: user.userId,
        login_pw: user.userPw 
    })
    if (loginResult.data.code === 200) {
        const accessToken = loginResult.data.data.token
        const refreshToken = loginResult.data.data.refresh_token

        localStorage.setItem('accessToken', accessToken);
        localStorage.setItem('refreshToken', refreshToken);

        handleLogin() // 로그인 후 화면 전환
    } else {
        alert(loginResult.data.message)
    }
}

 

로그인 결과 코드 값에 따라 200(성공)시에는 변수로 각각 선언한 accessToken과 refreshToken값을 넣는다.

로컬 스토리지에 변수로 선언된 accessToken과 refreshToken을 넣어 저장한다.

 

로그인 실패 시에는 로그인 실패 메시지를 표현한다.

 

4. 엔터 키를 눌러도 자동으로 로그인이 되도록 코드를 추가한다.

// 엔터 키로 로그인 하기
const handleBtn = async (e) => {
    if(e.key === 'Enter'){
        await loginInfo()
    }
}

<input type='text' className='mb-2' name='userId' value={user.userId} onChange={onChangeHandle} onKeyDown={handleBtn} placeholder='ID'/>
<input type='password' className='mb-4' name='userPw' value={user.userPw} onChange={onChangeHandle} onKeyDown={handleBtn} placeholder='PassWord'/>
<button type='button' className='confirmLogin btn' onClick={loginInfo}>Login</button>

 

onKeyDown를 사용하여 enter키가 눌릴 때 loingInfo 함수가 실행되게 한다.

 

차후 포스트는 리프레시 토큰을 이용하여 만료된 accessToken을 컨트롤 하는 방법을 작성하려고 한다!

 

2024.08.02 - [Develope/REACT] - 리액트 - refreshToken을 이용한 aceessToken 발급

리액트 - refreshToken을 이용한 aceessToken 발급