Flutter 中的路由拦截器：全局拦截与处理请求

在 Flutter 中，路由拦截器通常用于在导航到新页面之前或之后执行某些操作，例如权限检查、日志记录、数据加载等。Flutter 提供了多种方式来实现路由拦截，最常见的方式是使用 Navigator 的 onGenerateRoute 和 onUnknownRoute 回调，或者通过自定义的 RouteObserver 来监听路由变化。

1. 使用 onGenerateRoute 进行全局路由拦截

onGenerateRoute 是一个全局路由生成器，可以在导航到新页面之前进行拦截和处理。你可以在 MaterialApp 或 CupertinoApp 中设置 onGenerateRoute 属性。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      onGenerateRoute: (settings) {
        // 在这里进行路由拦截
        if (settings.name == '/protected') {
          // 检查用户是否已登录
          bool isLoggedIn = checkUserLoginStatus();
          if (!isLoggedIn) {
            // 如果未登录，重定向到登录页面
            return MaterialPageRoute(builder: (context) => LoginPage());
          }
        }
        // 默认路由处理
        return MaterialPageRoute(builder: (context) => HomePage());
      },
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(child: Text('Home Page')),
    );
  }
}

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Login')),
      body: Center(child: Text('Login Page')),
    );
  }
}

bool checkUserLoginStatus() {
  // 模拟用户登录状态
  return false;
}

2. 使用 RouteObserver 监听路由变化

RouteObserver 可以用来监听路由的变化，例如页面进入和离开。你可以通过继承 RouteObserver 来创建自定义的路由观察器。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      navigatorObservers: [MyRouteObserver()],
      routes: {
        '/': (context) => HomePage(),
        '/protected': (context) => ProtectedPage(),
      },
    );
  }
}

class MyRouteObserver extends RouteObserver<PageRoute<dynamic>> {
  @override
  void didPush(Route<dynamic> route, Route<dynamic>? previousRoute) {
    super.didPush(route, previousRoute);
    // 当新页面被推入时执行
    print('Route pushed: ${route.settings.name}');
  }

  @override
  void didPop(Route<dynamic> route, Route<dynamic>? previousRoute) {
    super.didPop(route, previousRoute);
    // 当页面被弹出时执行
    print('Route popped: ${route.settings.name}');
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(child: Text('Home Page')),
    );
  }
}

class ProtectedPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Protected')),
      body: Center(child: Text('Protected Page')),
    );
  }
}

3. 使用 WillPopScope 拦截返回按钮

WillPopScope 可以用来拦截返回按钮的操作，例如在用户尝试返回时提示是否保存数据。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => ProtectedPage()),
            );
          },
          child: Text('Go to Protected Page'),
        ),
      ),
    );
  }
}

class ProtectedPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        // 拦截返回按钮
        bool shouldPop = await showDialog(
          context: context,
          builder: (context) => AlertDialog(
            title: Text('Are you sure?'),
            content: Text('Do you want to go back?'),
            actions: [
              TextButton(
                onPressed: () => Navigator.of(context).pop(false),
                child: Text('No'),
              ),
              TextButton(
                onPressed: () => Navigator.of(context).pop(true),
                child: Text('Yes'),
              ),
            ],
          ),
        );
        return shouldPop ?? false;
      },
      child: Scaffold(
        appBar: AppBar(title: Text('Protected')),
        body: Center(child: Text('Protected Page')),
      ),
    );
  }
}

通过这些方式，你可以在 Flutter 中实现全局的路由拦截和处理，确保在导航过程中执行必要的逻辑。