39일차 프론트에서 JWT토큰 검증 오류

2023.09.19

1. null 값을 받아와서 예외가 발생하는 경우

포스트맨에서 요청하는 방식과 html에서 요청하는 방식의 차이

기존에는 포스트맨에서 쿠키에 담겨져 있는 토큰 값을 자체적으로 처리해주고 있었으나,
클라이언트에서 요청할 때는 헤더에서 요청을 처리하게끔 로직을 수정해야 한다.

📋 JwtAuthenticationFIlter.java

@Override
protected void successfulAuthentication(HttpServletRequest request, HttpServletResponse response, FilterChain chain, Authentication authResult) throws IOException {


    log.info("로그인 성공 및 JWT 생성");
    String email = ((UserDetailsImpl) authResult.getPrincipal()).getUser().getEmail(); // username -> email
    UserRoleEnum role = ((UserDetailsImpl) authResult.getPrincipal()).getUser().getRole();
    String token = jwtUtil.createToken(email, role); // username -> email

    response.addHeader(JwtUtil.AUTHORIZATION_HEADER, token); // 헤더에 담기
    jwtUtil.addJwtToCookie(token, response); // 쿠키에 담기

• 해당 부분에서 쿠키에 담는 게 아닌 -> 헤더로 담아서 JWT 를 생성하게 끔 변경
• JwtAuthorizationFilter.java 에서도 토큰을 추출하는 게 아닌 헤더에서 순수한 토큰을 추출하게 끔 변경
• JwtUtil.java 에서는 getTokenFromRequest -> getJwtFromHeader 메서드를 통해서 토큰을 가져온다.

📋 JwtAuthorizationFIlter.java

@Override
protected void doFilterInternal(HttpServletRequest req, HttpServletResponse res, FilterChain filterChain) throws ServletException, IOException {


    // *** 이전과 다른부분, 쿠키에서 토큰을 추출하던 것에서 getJwtFromHeader()를 통해 헤더에서 순수한 토큰을 추출하는 것으로 변경 간결해짐.
    String tokenValue = jwtUtil.getJwtFromHeader(req);

    if (StringUtils.hasText(tokenValue)) {

        if (!jwtUtil.validateToken(tokenValue)) {
            log.error("Token Error");
            return;
        }

        Claims info = jwtUtil.getUserInfoFromToken(tokenValue);

        try {
            setAuthentication(info.getSubject());
        } catch (Exception e) {
            log.error(e.getMessage());
            return;
        }
    }

    filterChain.doFilter(req, res);
}

---

1-2. null 값을 받아와서 예외가 발생하는 경우 ->클라이언트에서 쿠키를 받아오지 못하는 경우

기존에 MenuRequestDto 와 매칭되는 변수 값을 할당하고 ajax를 통해 컨트롤러로 보내기만 했을 경우, 클라이언트에서
포스트맨과는 다르게 헤더에 들어있는 값을 받아오지 못한다.

그래서 html 부분에 키 값을 받아올 수 있는 메서드를 넣어주어야 한다.

---

2. 토큰이 유효하지 않는 오류 발생 -> 토큰의 값을 가져오지 못하거나, 디코딩의 문제(base64)

Illegal base64url character: '%'
Illegal base64url character: ' '

base64로 디코딩 하지 못하는 문제가 발생

Name : Authorization
Value Bearer%20eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJlbWFpbEBlbWFpbDEyMy5jb20iLCJhdXRoIjoiVVNFUiIsImV4cCI6MTY5NTIyMzM2NywiaWF0IjoxNjk1MjE5NzY3fQ.RUs_RhtlRKK-xTrHVwy9KQxYAeeWpXf92a1PYl3Y8sk

• 해당 value 값에서 %20 , 이 값을 디코딩하지 못하는 문제 발생

디코딩이 가능한 decodeURIComponent 와 뒤의 명령어들을 통해서 오류 수정

function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) {
const decodedValue = decodeURIComponent(parts.pop().split(';').shift()).trim();  //여기서 trim() 추가->공백 제거
return decodedValue;
}
}

3. Jwt토큰 Invalid 문제

해당 토큰 값을 jwt.io에서 인증해보니 invalid가 뜨는데 -> 토큰 검증은 되고 있는 상황
어떤 상황인지 더 알아볼 필요가 있어 보인다.