遇到http 401时flutter重定向

Question

我现在有这样的导航:

main > app > account > address

现在我遇到了问题，如果用户获取地址并且他们的 session 过期，我该如何将他们重定向回登录页面？仍然是 flutter 的新手，找不到如何将未经身份验证的状态发送到 main 以便它可以重定向的解决方案。

我正在使用 dio 和 MobX 包。

 dio.interceptors
        .add(InterceptorsWrapper(onRequest: (RequestOptions options) async {
      SharedPreferences prefs = await SharedPreferences.getInstance();

      String token = prefs.getString('access_token');

      if (token != null) {
        options.headers['Authorization'] = 'Bearer $token';
      }

      options.headers['Accept'] = 'application/json';

      return options; //continue
    }, onResponse: (Response response) {
      final int statusCode = response.statusCode;
      var results = {};

      if (statusCode == 200 || statusCode == 201 || statusCode == 204) {
        final dynamic decodeResponse = this.decodeResponse(response);
        bool responseIsList = decodeResponse is List;

        if (!responseIsList && decodeResponse['token'] != null) {
          final token = decodeResponse['token'];
          setAuthorizationToken(token['access_token'], token['refresh_token']);
        }

        if (responseIsList) {
          return decodeResponse;
        } else {
          final resultToAdd = decodeResponse;

          results.addAll(resultToAdd);

          return results;
        }
      }

      return response;
    }, onError: (DioError e) async {
      final r = e.response;
      if (r.statusCode == 401) {
        AuthStore().unauthorize(prefs: _sharedPreferences);
      }

      if (r != null) {
        return {"has_error": true, ...r.data};
      }
      // Do something with response error
      return e;
    }));

我尝试将 Observer 放在我的 main.dart 上以继续检查状态

@override
Widget build(BuildContext context) {
  return Observer(builder: (_) {

  if (store.statusAuth == 401) {
    Navigator.pushReplacementNamed(context, '/'); // this is error
  } 


  // other material app function
});

有什么解决办法吗？

我目前唯一能想到的解决方案是在每次调用 API 时(每个商店)进行检查。如果 401 将自动将其发送回登录页面。但这种方法将是非常多余的。

Answer 1

我也有同样的问题。要解决这个问题，我们需要一个没有context 的Navigation 来在interceptors 上导航。Api 服务在 MaterialApp 之前初始化。 MaterialApp 允许传递顶部导航器的 navigatorKey。

我在定义 apiservice 的拦截器并将其用于返回 MaterialApp 时创建 GlobalKey。

  final GlobalKey<NavigatorState> navigator;//Create a key for navigator

并创建 apiService

void _configAuthApiService() {
    ...
    if (error.response?.statusCode == 401) {
        navigator.currentState.pushReplacementNamed('/login');
    }
    ...
}

创建 Material 应用时:

MaterialApp(
    ...
    navigatorKey: navigator,
    ...
)