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

在 Flutter 中，路由拦截器可以用于全局拦截和处理导航事件，例如在用户尝试导航到某个页面之前进行身份验证、权限检查或其他自定义逻辑。Flutter 提供了 NavigatorObserver 和 RouteAware 来实现路由拦截和监控。

1. 使用 NavigatorObserver 全局拦截路由

NavigatorObserver 是一个用于监听导航事件的类。你可以通过继承它来监听路由的变化，并在必要时进行拦截。

import 'package:flutter/material.dart';

class MyNavigatorObserver extends NavigatorObserver {
  @override
  void didPush(Route route, Route? previousRoute) {
    super.didPush(route, previousRoute);
    // 当路由被推入时调用
    print('Route pushed: ${route.settings.name}');
  }

  @override
  void didPop(Route route, Route? previousRoute) {
    super.didPop(route, previousRoute);
    // 当路由被弹出时调用
    print('Route popped: ${route.settings.name}');
  }

  @override
  void didReplace({Route? newRoute, Route? oldRoute}) {
    super.didReplace(newRoute: newRoute, oldRoute: oldRoute);
    // 当路由被替换时调用
    print('Route replaced: ${newRoute?.settings.name}');
  }

  @override
  void didRemove(Route route, Route? previousRoute) {
    super.didRemove(route, previousRoute);
    // 当路由被移除时调用
    print('Route removed: ${route.settings.name}');
  }
}

在 MaterialApp 中使用 navigatorObservers 属性来添加自定义的 NavigatorObserver：

MaterialApp(
  navigatorObservers: [MyNavigatorObserver()],
  home: HomePage(),
);

2. 使用 RouteAware 进行特定页面的路由拦截

RouteAware 是一个 mixin，用于监听特定页面的路由变化。你可以通过 RouteObserver 来监听特定页面的路由状态。

import 'package:flutter/material.dart';

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> with RouteAware {
  final RouteObserver<PageRoute> routeObserver = RouteObserver<PageRoute>();

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    routeObserver.subscribe(this, ModalRoute.of(context)!);
  }

  @override
  void dispose() {
    routeObserver.unsubscribe(this);
    super.dispose();
  }

  @override
  void didPush() {
    // 当页面被推入时调用
    print('MyPage pushed');
  }

  @override
  void didPopNext() {
    // 当从其他页面返回到当前页面时调用
    print('MyPage returned to');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('MyPage')),
      body: Center(child: Text('MyPage Content')),
    );
  }
}

在 MaterialApp 中使用 navigatorObservers 属性来添加 RouteObserver：

MaterialApp(
  navigatorObservers: [RouteObserver<PageRoute>()],
  home: HomePage(),
);

3. 全局拦截路由的示例

你可以在 NavigatorObserver 中进行全局拦截，例如在用户尝试导航到某个页面之前进行身份验证：

class AuthNavigatorObserver extends NavigatorObserver {
  @override
  void didPush(Route route, Route? previousRoute) {
    super.didPush(route, previousRoute);
    if (route.settings.name == '/protected') {
      // 检查用户是否已登录
      if (!isUserLoggedIn()) {
        // 如果未登录，重定向到登录页面
        Navigator.pushNamed(route.navigator!.context, '/login');
      }
    }
  }

  bool isUserLoggedIn() {
    // 实现你的登录检查逻辑
    return false;
  }
}

在 MaterialApp 中使用：

MaterialApp(
  navigatorObservers: [AuthNavigatorObserver()],
  initialRoute: '/',
  routes: {
    '/': (context) => HomePage(),
    '/protected': (context) => ProtectedPage(),
    '/login': (context) => LoginPage(),
  },
);

通过以上方法，你可以在 Flutter 中实现全局的路由拦截和处理。