flutter - 如何在 token 或刷新 token 过期时使用 bloc in flutter 将用户重定向到注销页面

Question

这是我的基础存储库，它从我想要将用户重定向到自定义页面的 Bloc 中获取数据，例如在 token 过期或刷新 token 过期时注销。我在 bloc consumer 或 bloc listener 中更改页面，但在这种情况下，这是愚蠢的工作，因为我应该在向服务器请求的任何地方用另一个 bloc 方法替换 bloc consumer

 @override
  Future<Map<String, dynamic>> get(String url) async {
    // Uri newUrl = Uri.parse(baseUrl + url);
    var newUrl = baseUrl + url;
    dio.Response response;
    try {
      // x.interceptors.add(dio.InterceptorsWrapper(
      //   onError: (e, handler) {
      //     if(e.response!.statusCode == 401)
      //         redirect user to custom page
      //   },
      // ));
      response = await dio.Dio()
          .get(newUrl, options: dio.Options(headers: headersList))
          .timeout(duration);
      var result = _processResponse(response);
      if (result.runtimeType.toString().toLowerCase() == 'string') {
        return <String, String>{'key': result};
      }
      return result;
    } on SocketException {
      throw FetchDataException('internetConnection');
    } on TimeoutException {
      throw ApiNotRespondingException('api not found ');
    } on Exception catch (e) {
      var response = e as dio.DioError;
      print(e.toString());
      throw _handleError(response);
    }
  }

Answer 1

我最近问了自己同样的问题并提出了这个解决方案(可能不是最好的)。

1. 您需要一个单独的 block 来包含 jwt token ；
2. 将这个 bloc 初始化为一个单例。我用 injectable使用 get_it作为 DI

@singleton
class TokenBloc extends Bloc<TokenEvent, TokenState> {
  final ISecureStorage secureStorage;

  TokenBloc(this.secureStorage) : super(TokenInitial()) {
    on<TokenReseted>(delete);
    on<TokenUpdated>(put);
  }

  put(event, emit) {
    emit(TokenAuthentificated(event.accessToken, event.refreshToken));
    secureStorage.write('accessToken', event.accessToken);
    secureStorage.write('refreshToken', event.refreshToken);
  }

  delete(event, emit) {
    emit(TokenDeleted());
    emit(TokenInitial());
    secureStorage.write('accessToken', null);
    secureStorage.write('refreshToken', null);
  }
}

1. 像这样用 BlocProvider 包装你的 Home 小部件

return BlocProvider.value(
  value: getIt.get<TokenBloc>(),
  child: const CupertinoApp(
    home: Home(),
  ),
);

1. 创建一个用于从 API 请求新刷新 token 的模块，该模块将使用此 TokenBloc 更新/删除 token 。您可以使用 getIt 从 RefreshTokenAPI 访问 TokenBloc。

getIt.get<TokenBloc>().add(TokenReseted());

1. 您所要做的就是监听 UI 中的 TokenBloc 变化并进行重定向。

就是这样。希望它会有所帮助:)