Search
📚

EP18. Flutter http 인증 처리

생성일
2024/06/09 12:31
마지막 업데이트
2024/06/16

EP18. Flutter http 인증 처리

Supabase 서버 로직에서 인증 미들웨어의 적용으로 Flutter에서 Reuqest 헤더에 인증정보를 담아주지 않으면 401 Response가 내려오도록 구현되어 있습니다.
따라서 Flutter에서 API 요청시 헤더에 인증정보를 담아주도록 하겠습니다.

1. APIClient에 인증 헤더 정보 추가 로직 구현

lib/network/api_client.dart 수정
import 'dart:convert'; import 'package:http/http.dart' as http; import 'package:swm_flutter_package/services/auth_service.dart'; class ApiClient { // 생성자에서 baseUrl을 설정하고, authService 인스턴스를 생성합니다. ApiClient(this.baseUrl) : authService = FPAuthService(); final String baseUrl; final FPAuthService authService; // 공통 헤더를 생성하는 메서드입니다. // JWT 토큰을 가져와서 Authorization 헤더에 추가합니다. Map<String, String> _getHeaders() { final token = authService.getJWTToken(); return { 'Content-Type': 'application/json; charset=UTF-8', if (token != null) 'Authorization': 'Bearer $token', }; } // GET 요청을 처리하는 메서드입니다. // 지정된 endpoint로 GET 요청을 보내고 응답을 처리합니다. Future<String> get(String endpoint) async { final headers = _getHeaders(); final response = await http.get( Uri.parse('$baseUrl$endpoint'), headers: headers, ); return _handleResponse(response); } // POST 요청을 처리하는 메서드입니다. // 지정된 endpoint로 POST 요청을 보내고 응답을 처리합니다. Future<String> post(String endpoint, Object? body) async { final headers = _getHeaders(); final response = await http.post( Uri.parse('$baseUrl$endpoint'), headers: headers, body: jsonEncode(body), ); return _handleResponse(response); } // DELETE 요청을 처리하는 메서드입니다. // 지정된 endpoint로 DELETE 요청을 보내고 응답을 처리합니다. Future<String> delete(String endpoint, Object? body) async { final headers = _getHeaders(); final response = await http.delete( Uri.parse('$baseUrl$endpoint'), headers: headers, body: jsonEncode(body), ); return _handleResponse(response); } // HTTP 응답을 처리하는 메서드입니다. // 상태 코드가 200-299일 경우 응답 본문을 반환하고, 그렇지 않으면 예외를 발생시킵니다. String _handleResponse(http.Response response) { if (response.statusCode >= 200 && response.statusCode < 300) { return response.body; } else { throw Exception('Failed to load data: ${response.statusCode}'); } } }
Dart
복사
_getHeaders() 함수를 만들어 공통 헤더를 생성합니다.
공통헤더에서 인증정보를 추가합니다.

2. 인증정보가 추가된 헤더를 포함한 API Request

모든 API Request header에 인증정보를 포함했으므로 다시 API 호출을 테스트합니다.

3. API Request/Response 확인

Flutter DevTools에서 Request/Response를 확인합니다.
토큰 등록 API Response를 통해 토큰이 정상적으로 등록되었음을 알 수 있습니다.
Supabase > Table Editor에서 Supabase Database에 데이터가 추가되었음을 확인할 수 있습니다.
추가/삭제/조회 API Reuqest/Response와 Database의 실제 데이터를 보며 의도한 대로 동작하는지 점검합니다.

강의 코드

7
pull