인프런 커뮤니티 질문&답변

7강 마지막 들으면서 적용하는데
분명 에뮬레이터도 정상동작인데 dio.dart의 onError함수에서 계속 401 auth에러가 발생한다고 표시가 돼서 콘솔로 디버깅을 했습니다.
그런데 마지막 resending하는 부분까지 정상 도달은 하지만 onResponse의 콘솔은 뜨지않고 재시작해서 accessToken을 다시 발급 받았음에도 계속 onError에서 401auth 에러가 발생합니다. 어떤 부분이 문제일까요

[요약]
토큰만료 =>홈 스크린에 데이터 사라짐 => 재시작 => 홈 스크린에 데이터 불러와짐 => 문제발생 데이터는 불러와지는데 디버그 콘솔에 REQ랑 ERROR표시남(401 AUTH 관련 에러) => 재시작 => 동일 에러 무한

[에러 내용]
I/flutter ( 4232): [REQ] [GET] http://10.0.2.2:3000/restaurant/

I/flutter ( 4232): [ERROR] [GET] http://10.0.2.2:3000/restaurant/

I/flutter ( 4232): [ERROR] [MESSAGE] This exception was thrown because the response has a status code of 401 and RequestOptions.validateStatus was configured to throw for this status code.

I/flutter ( 4232): The status code of 401 has the following meaning: "Client error - the request contains bad syntax or cannot be fulfilled"

I/flutter ( 4232): Read more about status codes at https://developer.mozilla.org/en-US/docs/Web/HTTP/Status

I/flutter ( 4232): In order to resolve this exception you typically have either to verify and fix your request code or you have to fix the server code.

dio.dart

import 'package:dio/dio.dart';
import 'package:flutter_secure_storage/flutter_secure_storage.dart';
import 'package:section2/common/const/data.dart';

class CustomInterceptor extends Interceptor {
  final FlutterSecureStorage storage;

  CustomInterceptor({
    required this.storage,
  });

  /// 1) 요청 보낼 때
  /// 요청이 보내질때마다
  /// 만약에 요청의 Headers에 accessToken이 true 이면
  /// 실제 토큰을 가져와서 기존 accessToken값을 삭제하고 {
  /// authorization : Beader $토큰} 값을 추가
  @override
  void onRequest(
      RequestOptions options, RequestInterceptorHandler handler) async {
    print('[REQ] [${options.method}] ${options.uri}');

    if (options.headers['accessToken'] == 'true') {
      options.headers.remove('accessToken');

      final accessToken = await storage.read(key: ACCESS_TOKEN_KEY);
      options.headers.addAll(
        {'authorization': 'Bearer $accessToken'},
      );
    }

    if (options.headers['refreshToken'] == 'true') {
      options.headers.remove('refreshToken');

      final refreshToken = await storage.read(key: REFRESH_TOKEN_KEY);
      options.headers.addAll(
        {'authorization': 'Bearer $refreshToken'},
      );
    }

    return super.onRequest(options, handler);
  }

  /// 2) 응답 받을 때
  @override
  void onResponse(Response response, ResponseInterceptorHandler handler) {
    print(
        '[RES] [${response.requestOptions.method}] ${response.requestOptions.uri}');

    super.onResponse(response, handler);
  }

  /// 3) 에러 났을 때
  @override
  void onError(DioException err, ErrorInterceptorHandler handler) async {
    // 401에러 났을 때 (status code)
    // 토큰을 재발급 받는 시도를하고 토큰이 재발급되면
    // 다시 새로운 토큰을 요청한다.

    print('[ERROR] [${err.requestOptions.method}] ${err.requestOptions.uri}');
    print('[ERROR] [MESSAGE] ${err.message}');

    // refreshToken이 없는 경우
    final refreshToken = await storage.read(key: REFRESH_TOKEN_KEY);
    if (refreshToken == null) {
      // 에러 던질때는 handler.reject()사용

      return handler.reject(err);
    }

    final isStatus401 = err.response?.statusCode == 401;
    final isPathRefresh = err.requestOptions.path == '/auth/token';

    if (isStatus401 && !isPathRefresh) {
      final dio = Dio();

      try {
        final res = await dio.post(
          'http://$ip/auth/token',
          options: Options(
            headers: {
              'authorization': 'Bearer $refreshToken',
            },
          ),
        );

        final accessToken = res.data['accessToken'];

        final options = err.requestOptions;

        //기존 토큰 변경
        options.headers.addAll({
          'authorization': 'Bearer $accessToken',
        });

        await storage.write(key: ACCESS_TOKEN_KEY, value: accessToken);

        // 에러난 요청options에 토큰값을 신규로 변경하여 재전송
        final resending = await dio.fetch(options);

        return handler.resolve(resending);
      } on DioException catch (e) {
        return handler.reject(e);
      }
    }

    return handler.reject(err);
  }
}