[20240603] 일기, 게시판 구현 시 jwt 토큰으로 해당 사용자 권한을 인증하는 법

👀네이버 소셜로그인 이후, 일기나 게시판 작성/수정/삭제기능 구현 시 해당 글에 대한 사용자 권한을 인증하는 법을 정리해보았습니다.

보통 인증 권한은 jwt 토큰을 이용해서 진행합니다.

🍀jwt 토큰을 이용해서 사용자 인증을 하는 법

1. 사용자가 로그인할 때 프론트는 사용자의 정보들을 받아와 로컬스토리지에 저장합니다.

→ 로컬 스토리지는 브라우저가 종료되거나 명시적으로 지워지기 전까지 데이터를 유지합니다. 그 말인 즉슨 소셜로그인이 성공한 이후에는 페이지가 이동해도 로컬스토리지에 계속 사용자의 정보가 유지되고 있다는 뜻 !

⬇️ 소셜로그인 후 로컬스토리지 상태

→ 이때 새로 발급된 jwtToken도 함께 추가됩니다.

2. 이후 게시판, 일기 기능 구현 시 해당 사용자를 인증하기 위해 로컬스토리지에 있는 jwt 토큰을 백엔드에 보내서 인증요청을 함과 동시에 해당 기능 api를 요청합니다.

⬇️ 프론트 코드 예시

로그인 후 jwt 저장 예시
```
-import axios from 'axios';
```

- 요청시 jwt 전송 예시
```javascript
import axios from 'axios';

const api = axios.create({
    baseURL: '/api',
    headers: {
        'Authorization': `Bearer ${localStorage.getItem('token')}`
    }
});

const fetchPost = async (postId) => {
    try {
        const response = await api.get(`/posts/${postId}`);
        return response.data;
    } catch (error) {
        console.error('Fetch post failed', error);
    }
};

3. 클라이언트로부터 요청을 받은 서버는 사용자를 인증하고, 적절한 권한이 있는지 확인합니다.

스프링 어플리케이션의 JwtTokenFilter 클래스를 통해 HTTP 요청에서 JWT 토큰을 검증합니다. 이 과정에서 토큰의 유효성을 확인함. → 이 부분 해결 완료

예를 들어, 게시판의 수정 및 삭제 요청이 들어왔을 때 해당 요청을 처리하는 컨트롤러에서 사용자가 요청한 게시물이 자신의 것인지 확인합니다. → jwt 토큰 이용

백엔드에서 사용자 인증을 완료하면 성공 응답을 반환함과 동시에 프론트의 요청에 대한 반환값을 json으로 보내주면 됩니다.

⬇️ 예시 (코드가 정확하지 않을 수 있습니다.)

jwt 토큰을 보내는 프론트 예시
```
import axios from 'axios';
```

// 로그인 성공 후에 받은 JWT 토큰 const jwtToken = 'your_jwt_token_here';

// HTTP 요청 헤더 설정 const headers = { 'Authorization': Bearer ${jwtToken} };

// 요청 본문 const data = { // 필요한 경우 데이터 추가 };

// 백엔드로 POST 요청 보내기 axios.post('/api/login', data, { headers }) .then(response => { // 요청 성공 시 처리 로직 console.log(response.data); }) .catch(error => { // 요청 실패 시 에러 처리 로직 console.error('Error:', error); });

- jwt 토큰을 이용해서 사용자 인증정보를 설정하는 백엔드 코드 예시
```javascript
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.core.Authentication;
import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestHeader;
import org.springframework.web.bind.annotation.RestController;

import jakarta.servlet.http.HttpServletRequest;

@RestController
public class ProtectedController {

    @Autowired
    private JwtAuthenticationFilter jwtAuthenticationFilter;

    @GetMapping("/api/protected")
    public String protectedEndpoint(@RequestHeader("Authorization") String authorizationHeader) {
        // 프론트 요청에서 JWT 토큰 추출
        String jwt = extractJwtFromHeader(authorizationHeader);

        if (jwt == null) {
            return "JWT token is missing";
        }

        // 토큰을 이용하여 사용자 정보를 가져옴
        String userId = jwtAuthenticationFilter.getUserIdFromJwt(jwt);

        // 인증된 사용자의 정보를 이용하여 필요한 작업 수행
        return "Protected Endpoint Accessed by User: " + userId;
    }

    // 요청 헤더에서 JWT 토큰을 추출하는 메서드
    private String extractJwtFromHeader(String authorizationHeader) {
        if (authorizationHeader != null && authorizationHeader.startsWith("Bearer ")) {
            return authorizationHeader.substring(7); // "Bearer " 이후의 토큰 부분만 추출
        }
        return null;
    }
}

인증에 성공했으면, 백엔드에서 반환해준 값을 이용하시면 됩니다. → 백엔드에서 성공했다는 응답 메시지를 받으면 로컬스토리지에서 사용자의 정보를 받아올 수 있게 코드를 작성하시면 됩니다 !

이해 안되는 부분이 있으면 얘기해주세요 !

Chaeyeon0 / GreenDay_Study