Flutter如何实现路由守卫功能

在Flutter中如何实现路由守卫功能？目前项目中需要对某些页面进行权限验证，希望在路由跳转前拦截并检查用户登录状态。使用Navigator 2.0的话，具体应该通过RouteInformationParser、RouterDelegate还是Page来实现？有没有完整的代码示例说明如何进行路由拦截和权限判断？

2 回复

在Flutter中，可通过onGenerateRoute或Navigator的push方法拦截路由。使用MaterialApp的onGenerateRoute检查条件，若不符合则重定向或阻止跳转。也可用WillPopScope拦截返回操作。

更多关于Flutter如何实现路由守卫功能的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，可以通过路由拦截实现守卫功能，常用以下两种方式：

  1. 使用Navigator观察者（推荐）
class AuthGuard extends NavigatorObserver {
  @override
  void didPush(Route route, Route? previousRoute) {
    if (route.settings.name == '/protected') {
      // 检查用户权限
      if (!UserService.isLoggedIn) {
        // 跳转到登录页
        navigator?.pushReplacementNamed('/login');
      }
    }
  }
}

// 在MaterialApp中注册
MaterialApp(
  navigatorObservers: [AuthGuard()],
  // ...
)
  1. 使用onGenerateRoute
MaterialApp(
  onGenerateRoute: (settings) {
    if (settings.name == '/protected') {
      if (!UserService.isLoggedIn) {
        return MaterialPageRoute(builder: (_) => LoginPage());
      }
      return MaterialPageRoute(builder: (_) => ProtectedPage());
    }
    return null; // 使用默认路由
  },
)

核心要点：

  • 在路由跳转前验证权限
  • 未通过时重定向到指定页面
  • 可结合状态管理（如Provider）获取用户状态

这种方式能有效保护需要认证的页面，提升应用安全性。

回到顶部