[React Js] Jwt Token 다루기 (Header, Cookie)

프로젝트가 시간을 거치며, 웹 퍼블리싱은 마무리가 되어가고 백엔드와의 연동이 작업이 주가 되어가고있다.

우연치 않게, 회원가입 및 메인 페이지 등 주요 페이지들을 만들어 왔기에, 연동 할 부분도 엄청나게 많았는데~ 1,2 주 정도 토큰을 올바르게 사용하지 못해서 매우매우매우매우매우매우매우매우 힘들었다.

나중에 다시 사용 할 때를 위해, 또한 나와 같이 고통을 겪는 프론트엔드 개발자들을 위해 게시물을 정리 해보고자한다.

 

1. 서버는 유저를 어떻게 인식하는가?

웹 사이트를 이용할 때엔 개개인의 고유 권한을 부여하기 위해 회원을 등록하고, 로그인한다 그렇다면사용자가 로그인 했다는 정보는 서버에서는 어떻게 인식할까?

사용자가 로그인 정보(id, pw)를 알맞게 보내면, 서버에서는 이를 DB에 저장된 회원 정보와 매치하고 이 사람은 회원입니다. 라는 증표로 '세션ID or Token'을 발급해서 보내준다. 로그인에 활용되는 대표적인 방식으로Session과Token의 방식이 있는데, 본 게시물에서 다뤄 볼 방식은 Token 중에서도 Jwt Token입니다.

 

=> Session은 대표적인 문제점으로 세션 동기화, DB 과부화, CORS 문제 등등... 이 있으니 자세한 내용은 검색을 추천합니다 :)  

 

2. Token은 어떻게 주고받고, 어디에 저장되는가?

서버와 클라이언트가 (쉽게말하면 우리의 nodejs로 실행된 react code+브라우저와 springboot+was) HTTP 통신을 이용해 token을 주고받을 땐 Header, Cookie 등을 활용하여 주고받을 수 있다.
현재 우리가 주고받는 형식은 다음과 같다.

 

2-1 ) 로그인

 

Front의 React 코드

// SignForm.js

axios .post('/api/user/login',data)
	.then((response) => {
    	const accessToken = response.data.response.data;
        setJwt(accessToken); 
        history.push('/main'); 
     }) 
     
 
 // Token.js 
     
 export const setJwt = (token) => { 
 	instance.defaults.headers.common['jwt-auth-token'] = token; 
    setCookie('jwt-auth-token', token); 
  }
    

BackEnd의 SpringBoot 코드

@PostMapping("/user/login") 

public ApiResult<Map<String,Object>> login(HttpServletResponse res, @RequestBody UserDTO userdto){
	
    Map<String,Object> resultMap = new HashMap<>(); ...(생략)... 
    String token = jwtService.create(loginUser); 
    res.setHeader("jwt-auth-token",token); 
    resultMap.put("data",token); ...(생략)... 
	return OK(resultMap); 
    
 }

 

서버에서는 로그인시 정보가 일치하면 token을 생성하고 Header와 requestbody로 보내준다.
(원래는 Header로만 보내주었으나, response로 받는 방법이 헷갈려서 requestbody 안에도 담아줌)
클라이언트에서는 받은 토큰을 header와 cookie에 둘 다 담아준다.

 

 

2-2) token 정보 요청 

 

Front의 React 코드

  // Token.js
  
  export const getJwt = (uri) => {  
  	instance.defaults.headers.common\['jwt-auth-token'\] = getCookie('jwt-auth-token');  
  	return axios  
  	.get(uri,{  
  		headers:{  
  			'jwt-auth-token': instance.defaults.headers.common\['jwt-auth-token'\]  
  		}  
  	})  
  }

 

Backend의 Spring Boot 코드

  @GetMapping("/t/user/info")  
  public ApiResult getInfo(HttpServletRequest req){  
  Long id = Long.valueOf(String.valueOf(jwtService.get(req.getHeader("jwt-auth-token")).get("UserId")));  
  User user =userService.getUserInfo(id);  
  ...(생략)...

담겨져있던 cookie에서 JWT 정보를 꺼내와서 header에 넣고, 이를 서버단에 요청을 보낸다.

 

서버에서는 HttpServletRequest를 이용해 request의 header 정보에 담긴 token을 꺼내어 인증한다. ( by OURDUS TEAM )