Flutter Web：如何使用auto_route插件禁用浏览器返回按钮？

在Flutter Web场景下，WillPopScope对浏览器返回按钮的拦截失效，本质是AutoRoute的路由栈管理和浏览器历史栈的同步逻辑导致的——普通的WillPopScope无法完全接管AutoRoute对Web历史记录的处理。以下是几种可行的解决方法：

方法一：登录成功后替换路由栈（最直接） #

不要用push跳转首页，而是用replace替换整个路由栈，彻底移除登录页的路由记录，这样浏览器历史中不会留存登录页的入口，自然无法返回：

// 登录成功后的跳转代码
context.router.replace(const HomeRoute());
// 若需传递参数，示例：
// context.router.replace(HomeRoute(userId: currentUser.id));

这种方式从根源上解决问题，无需额外拦截逻辑，是最推荐的方案。

方法二：用PopScope拦截返回事件（替代WillPopScope） #

Flutter 3.10+推出的PopScope相比WillPopScope更适配Web场景，结合AutoRoute的路由栈信息，可以精准拦截返回行为：

@override
Widget build(BuildContext context) {
  return PopScope(
    // 直接禁止返回，或根据路由栈动态判断
    canPop: false,
    onPopInvoked: (didPop) {
      if (didPop) return;
      // 自定义拦截逻辑：比如判断当前路由栈是否只有首页，阻止返回登录页
      final routeStack = context.router.stack;
      if (routeStack.isNotEmpty && routeStack.last.name == HomeRoute.name) {
        // 不执行任何返回操作，直接拦截
        return;
      }
    },
    child: Scaffold(
      // 首页内容
      appBar: AppBar(title: const Text('首页')),
    ),
  );
}

方法三：全局路由守卫兜底 #

通过AutoRoute的路由守卫，拦截所有未授权访问登录页的请求，即使用户手动输入登录页地址或通过浏览器返回尝试进入，也会被自动跳转到首页：

1. 实现全局认证守卫：

class AuthGuard extends AutoRouteGuard {
  // 假设你有全局登录状态，比如通过状态管理获取isLoggedIn
  bool get isLoggedIn => AuthService.instance.isLoggedIn;

  @override
  void onNavigation(NavigationResolver resolver, StackRouter router) {
    if (isLoggedIn) {
      // 已登录用户尝试访问登录页，直接跳转到首页
      if (resolver.route.name == LoginRoute.name) {
        router.replace(const HomeRoute());
        resolver.next(false);
      } else {
        // 正常放行其他路由
        resolver.next(true);
      }
    } else {
      // 未登录用户强制跳转到登录页
      router.replace(const LoginRoute());
      resolver.next(false);
    }
  }
}

2. 在路由配置中绑定守卫：

@MaterialAutoRouter(
  routes: [
    AutoRoute(page: LoginRoute),
    // 给首页及其他需要认证的路由添加守卫
    AutoRoute(page: HomeRoute, guards: [AuthGuard]),
  ],
)
class $AppRouter {}

内容的提问来源于stack exchange，提问作者Fuse Koda