Spring boot + React 시작하기 5 (생성한 토큰 Header에 넣어 보내주기)

지금까지 작성한 코드에서는 기존에 생성한 토큰은 body에 적재하여 response를 보냈다.

 

서버 --> 클라이언트, 클라이언트 --> 서버 두 가지 케이스에 대해 모두 토큰을 해더에 넣어서 보내주고 싶었다.

 

우선 서버 --> 클라이언트 (API Response) Header에 생성한 토큰을 담아보도록 하겠다.

---

환경 : Mac OS, JDK17, Gradle, Spring 3.2.2

 

기존에 작성한 ResponseDto.java의 Result를 반환하는 함수를 추가하자.

 

추가된 함수는 "getResult" 함수뿐이다.

 

ResponseDto.java

package com.ssg.demo.v2.ssgdemov2.Dto;

import lombok.AllArgsConstructor;
import lombok.Data;

@Data
@AllArgsConstructor(staticName = "set")
public class ResponseDto<D> {
    private boolean result;
    private String message;
    private D data;

    // 성공 Return
    public  static <D> ResponseDto<D> setSuccess(String message) {
        return ResponseDto.set(true, message, null);
    }

    // 실패 Return
    public static <D> ResponseDto<D> setFailed(String message)
    {
        return ResponseDto.set(false, message, null);
    }

    // 성공 Return + Data
    public static <D> ResponseDto<D> setSuccessData(String message, D data) {
        return ResponseDto.set(true, message, data);
    }

    // 실패 Return + Data
    public static <D> ResponseDto<D> setFailedData(String message, D data) {
        return ResponseDto.set(false, message, data);
    }

    // 요청 성공 여부 확인
    public boolean getResult() {
        return result;
    }
}

 

그다음 AuthController.java의 "managerSignIn" 함수를 수정하고 "setToken" 함수를 추가하자.

 

setToken에서 헤더에 토큰을 담아서 보내 줄 것이다.

 

AuthController.java

package com.ssg.demo.v2.ssgdemov2.Controller;

import com.ssg.demo.v2.ssgdemov2.Dto.ResponseDto;
import com.ssg.demo.v2.ssgdemov2.Dto.SignInResponseDto;
import com.ssg.demo.v2.ssgdemov2.Dto.SignUpDto;
import com.ssg.demo.v2.ssgdemov2.Dto.SignInDto;
import com.ssg.demo.v2.ssgdemov2.Service.AuthService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/api/auth")
public class AuthController {
    @Autowired AuthService authService;

    @PostMapping("/signUp")
    public ResponseDto<?> signUp(@RequestBody SignUpDto requestBody) {
        ResponseDto<?> result = authService.signUp(requestBody);
        return result;
    }

    @PostMapping("/counselorSignIn")
    public ResponseDto<?> counselorSignIn(@RequestBody SignInDto requestBody){
        ResponseDto<?> result = authService.counselorSignIn(requestBody);
        return result;
    }

    @PostMapping("/managerSignIn")
    public ResponseEntity<?> managerSignIn(@RequestBody SignInDto requestBody) {
        ResponseDto<?> result = authService.managerSignIn(requestBody);
        return setToken(result);
    }

    // Response 결과에 따라 Header에 Token 설정
    private ResponseEntity<?> setToken(ResponseDto<?> result) {
        // 요청이 성공인 경우
        if(result.getResult()) {
            // reulst -> data -> token 추출
            SignInResponseDto signInResponse = (SignInResponseDto) result.getData();

            // Header에 Auth에 Token 지정, Body에는 result 그대로 작성 (result 내의 token은 제거해도 될듯)
            return ResponseEntity.ok()
                    .header("Authorization", "Bearer " + signInResponse.getToken())
                    .body(result);
        } else {
            return ResponseEntity.ok().body(result);
        }
    }
}

 

이렇게 작성이 되면 끝날 줄 알았다.

 

개발자 도구나 Postman으로 API Response 값의 Header를 보면 토큰값이 정상적으로 return 됐기 때문이다.

 

근데 이상하게 프론트에서 response 받은 값의 header 속성에는 Authorization가 존재하지 않았다.

 

빈 값으로 넘어오는 것도 아니고 해당 속성을 확인할 수 없었다.

 

mvcConfigurer.java의 설정을 바꾸고 해결되었다.

 

mvcConfigurer.java

package com.ssg.demo.v2.ssgdemov2;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class mvcConfigurer implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns()
                // Header에 대한 옵션 : Client의 Header에 Authorization가 표시되지 않는 원인
                // (개발자 도구나 Postman Header에만 표시되는 오류 해결)
                .allowedHeaders("*")
                .exposedHeaders("*");
    }
}

 

 

이제 다시 Front를 확인하면 Header에 Authorization 속성이 보일 것이다.

 

다음에는 클라이언트에서 토큰값을 설정해서 보내줬을 때, 서버에서 해당 토큰 값을 검증하는 부분에 대해 작성해보겠다.

 

---

Ref.

[1]. Spring boot + React 시작하기 1 (로그인 및 회원가입, 회원 관리 만들기) - 기본설정

https://seokbong.tistory.com/246

Spring boot + React 시작하기 1 (로그인 및 회원가입, 회원 관리 만들기) - 기본설정

[2]. Spring boot + React 시작하기 2 (로그인 및 회원가입, 회원 관리 만들기) - 회원 가입

https://seokbong.tistory.com/247

Spring boot + React 시작하기 2 (로그인 및 회원가입, 회원 관리 만들기) - 회원 가입

[3]. Spring boot + React 시작하기 3 (로그인 및 회원가입, 회원 관리 만들기) - 로그인 + 토큰생성

https://seokbong.tistory.com/248

Spring boot + React 시작하기 3 (로그인 및 회원가입, 회원 관리 만들기) - 로그인 + 토큰생성

[4]. Spring boot + React 시작하기 4 (비밀번호 암호화하여 DB에 적재하기 Spring Security)

https://seokbong.tistory.com/251

Spring boot + React 시작하기 4 (비밀번호 암호화하여 DB에 적재하기 Spring Security)