flutter - 如果 Flutter API 响应未经授权，如何重定向到登录页面？

Question

我正在构建一个使用 Golang API 来获取数据的 Flutter 应用程序。如果 JWT token 无效，API 将返回 401 未授权。如果响应状态为 401，如何在任何 API 调用上重定向到登录页面？
这是我的 flutter 代码:
主要.dart

void main() async {

  WidgetsFlutterBinding.ensureInitialized();

  Provider.debugCheckInvalidValueType = null;

  AppLanguage appLanguage = AppLanguage();
  
  await appLanguage.fetchLocale();
  
  runApp(MyApp(
    appLanguage: appLanguage,
  ));

}

class MyApp extends StatelessWidget {
  
  final AppLanguage appLanguage;

  MyApp({this.appLanguage});

  @override
  Widget build(BuildContext context) {

    return  MultiProvider(
          
                  providers: providers,

                  child: MaterialApp(
                            
                      localizationsDelegates: [
                         AppLocalizations.delegate,
                         GlobalMaterialLocalizations.delegate,
                         GlobalWidgetsLocalizations.delegate,
                      ],
          
                  initialRoute: RoutePaths.Login,
                  onGenerateRoute: Router.generateRoute,
                  )        
               );
        }  
}

表格.dart

class Tables extends StatelessWidget {

  const Tables({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    return BaseWidget<TablesModel>(
    
        model: TablesModel(api: Provider.of(context, listen: false)),
    
        onModelReady: (model) => model.fetchTables(),
    
        builder: (context, model, child) => model.busy

            ? Center(

                child: CircularProgressIndicator(),
              
              )
        
            : Expanded(
               
                 child: GridView.builder (
---

表格模型.dart

class TablesModel extends BaseModel {
  
  Api _api;

  TablesModel({@required Api api}) : _api = api;

  List<Tbl> tables;

  Future fetchTables() async {
    setBusy(true);
    tables = await _api.getTables();
    setBusy(false);
  }

  @override
  void dispose() {
    print('Tables has been disposed!!');
    super.dispose();
  }
}

api.dart

Future<List<Tbl>> getTables() async {
    
    var tables = List<Tbl>();

    try {

        var response = await http.get('$_baseUrl/tables/list');

        var parsed = json.decode(response.body) as List<dynamic>;
    
        if (parsed != null) {

           for (var table in parsed) {
    
               tables.add(Tbl.fromJson(table));
    
           }
        }

    } catch (e) {print(e); return null;}

    return tables;
  }

Answer 1

既然你已经有一个 MaterialApp在您的树和注册的命名路由中，这应该像添加调用以在您获得响应的同时推送您的登录页面一样简单。
首先，你应该修改getTables检查response状态码为 statusCode Response 的属性(property)对象并显示以下代码块:

var response = await http.get('$_baseUrl/tables/list');

if(response.statusCode == 401) {
  //Act on status of 401 here
}

现在您可以检查响应的状态代码何时为 401，您可以使用 Navigator 导航到您的登录页面。 . Navigator需要 BuildContext , 所以必须传递给 getTables功能。
这涉及修改 getTables成为:

Future<List<Tbl>> getTables(BuildContext context) async {

和 fetchTables需要类似的改变:

Future fetchTables(BuildContext context) async {

然后，在调用这些方法的地方，传递 context向下:
在 Tables

model.fetchTables(context)

在 TablesModel

Future fetchTables(BuildContext context) async {
  setBusy(true);
  tables = await _api.getTables(context);
  setBusy(false);
}

最后在 getTables ，您使用传递的 context使用 Navigator :

Future<List<Tbl>> getTables(BuildContext context) async {
  var tables = List<Tbl>();
  try {
      var response = await http.get('$_baseUrl/tables/list');

      //Check response status code
      if(response.statusCode == 401) {
        Navigator.of(context).pushNamed(RoutePaths.Login);//Navigator is used here to go to login only with 401 status code
        return null;
      }

      var parsed = json.decode(response.body) as List<dynamic>;

      if (parsed != null) {
         for (var table in parsed) {
             tables.add(Tbl.fromJson(table));
         }
      }

  } catch (e) {print(e); return null;}
  return tables;
}

而不是 Navigator.of(context).pushNamed(RoutePaths.Login); , 你可以使用 Navigator.pushNamed(context, RoutePaths.Login);如果您愿意，但您可以阅读 this answer , 他们在内部做同样的事情。
现在，当状态码为 401 时，用户将被导航到登录屏幕。