로그인(JWT, 전체 개념)

React/개념

로그인(JWT, 전체 개념)

hihijh826 2025. 4. 11. 14:06

728x90

SMALL

토큰

토큰이 왜 필요할까요?HTTP의 stateless 특성 때문에 사용자가 로그인 상태를 지속적으로 유지할 수 없음.
즉, 사용자가 로그인을 한 후에도 마이페이지와 같이 로그인이 필요한 페이지에 접근할 때마다 재로그인이 필요한데 이를 해결하기 위해 토큰이 사용
데이터 전달: 특정 정보를 안전하게 전달하기 위해 사용 식별: 사용자나 기기를 식별하는 데 필수

JWT란

Jason Web Token의 약자이다.

모바일 앱이나 웹에서 사용자 인증(Authentication)을 수행할 때 사용하는 암호화된 토큰이다.

사용자의 정보 등을 암호화하여 사용자 정보가 필요한 API를 호출할 때, 해당 토큰을 보내주면 백엔드에서 그 토큰을 검증(verity)하는 과정을 거친다.

그 후 response해주는 것이다

로그인 과정: 회원가입 시 비밀번호 암호화, 로그인 시 비밀번호 검증 후 JWT 토큰 생성 및 session/localStorage에 저장.
토큰 전송: 인가가 필요한 요청 시( 사용자 토큰 필요한 api등) session/localStorage에서 토큰을 가져와 HTTP Authorization 헤더로 전달.

로그인 과정

로그인 요청: 사용자 → 클라이언트에서 서버로 로그인 정보 전송.
서버에서 사용자 정보 확인 후 JWT 발급.
JWT 토큰 생성 및 저장:
- JWT 저장: 클라이언트에서 JWT를 로컬에 저장.
- JWT 인증 요청: 요청 시마다 JWT를 헤더에 포함해 전송.
- 서명 검증: 서버에서 JWT 검증 및 사용자 인증.
- 토큰 만료 시 갱신: REFRESH_TOKEN 또는 재로그인.
클라이언트에서 JWT 삭제 및 서버 로그아웃 처리.

// 토큰을 localStorage에서 삭제
localStorage.removeItem("login-token");
sessionStorage.removeItem("login-token");
// 둘 중 하나 사용

토큰 저장 및 서버에 토큰 전송 방법

로그인 성공 시 localStorage 혹은 sessionStorage에 토큰 저장:

로그인 성공 시, 백엔드에서 설정한 response.MESSAGE와 토큰의 발급 유무에 따라 로그인 성공 여부를 확인
ACCESS_TOKEN이 존재하면 localStorage 혹은 sessionStorage에 login-token이라는 키로 토큰을 저장합니다.

if (response.ACCESS_TOKEN) {
  localStorage.setItem('login-token', response.ACCESS_TOKEN);
}

로그인 함수 예시:

handleLogin = () => {
    axios.post(`${signinAPI}/login`, {
        email: this.state.email,
        password: this.state.password,
    })
    .then(response => {
        if (response.data.ACCESS_TOKEN) {
            localStorage.setItem('login-token', response.data.ACCESS_TOKEN);
        }
    })
    .catch(error => {
        console.error("로그인 오류:", error);
    });
};

2. 인가(Authorization)가 필요한 사이트에서 토큰 전달:

마이페이지, 장바구니 등 인가가 필요한 사이트에서 데이터를 요청할 때, localStorage에 저장한 토큰을 함께 전달합니다.
localStorage에 저장된 토큰을 Authorization 헤더에 포함시킴

axios.get(`${API}/protected-endpoint`, {
  headers: {
    "Content-Type": "application/json",
    Authorization: localStorage.getItem("login-token"),
  },
})
.then(response => {
  // 성공적으로 응답을 받았을 때의 처리
  console.log(response.data);
})
.catch(error => {
  // 에러 처리
  console.error(error);
});

'Content-Type': 'application/json': 데이터를 json 형태로 전송
Authorization: localStorage.getItem('login-token'): localStorage에 login-token key로 저장한 값을 HTTP Authorization 요청 헤더로 전달

728x90

LIST