Flutter路由守卫 #

一、路由守卫概念 #

1.1 什么是路由守卫 #

路由守卫用于在页面跳转前进行权限检查，如登录验证。

二、实现方式 #

2.1 onGenerateRoute实现 #

dart

class RouteGuard {
  static Route<dynamic>? onGenerateRoute(RouteSettings settings) {
    if (requiresAuth(settings.name) && !isAuthenticated()) {
      return MaterialPageRoute(
        builder: (context) => LoginPage(),
        settings: settings,
      );
    }
    
    return _getRoute(settings);
  }
  
  static bool requiresAuth(String? route) {
    return ['/profile', '/settings'].contains(route);
  }
  
  static bool isAuthenticated() {
    return AuthService.isLoggedIn;
  }
}

MaterialApp(
  onGenerateRoute: RouteGuard.onGenerateRoute,
)

2.2 NavigatorObserver实现 #

dart

class AuthObserver extends NavigatorObserver {
  @override
  void didPush(Route route, Route? previousRoute) {
    if (_requiresAuth(route.settings.name) && !_isAuthenticated()) {
      navigator?.pushReplacementNamed('/login');
    }
  }
}

MaterialApp(
  navigatorObservers: [AuthObserver()],
)

三、总结 #

3.1 实现方式 #

方式	说明
onGenerateRoute	路由生成时拦截
NavigatorObserver	监听路由变化

3.2 下一步 #

让我们学习 HTTP请求！