Flutter如何实现路由守卫的异步权限检查

在Flutter中，我想实现路由守卫的异步权限检查，但不太清楚具体该怎么做。比如在用户跳转某个页面时，需要先异步验证权限（如检查登录状态或API权限），通过后才允许导航，否则跳转到登录页或其他提示页面。目前尝试使用onGenerateRoute配合Future，但遇到路由在异步检查完成前就跳转的问题。请问如何正确实现这种异步权限控制？是否有推荐的路由守卫方案或第三方库？

bupafengyu 1楼

Flutter中可通过onGenerateRoute结合Future实现异步路由守卫。在MaterialApp中定义onGenerateRoute，使用await检查权限，若失败则跳转登录页，成功则返回目标路由。

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

zlyuanteng 2楼

在Flutter中实现路由守卫的异步权限检查，可以通过以下步骤实现：

1. 使用 `onGenerateRoute` 和 `RouteSettings`

在 MaterialApp 中配置 onGenerateRoute，结合自定义路由逻辑进行权限检查。

2. 实现权限检查函数

创建一个异步函数，检查用户权限（如登录状态、角色等），返回 bool 值。

3. 处理路由跳转

在权限检查完成后，根据结果决定跳转到目标页面或重定向到登录页。

示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      onGenerateRoute: (RouteSettings settings) {
        // 权限检查路由守卫
        return MaterialPageRoute(
          builder: (context) => AuthGuard(
            settings: settings,
            child: _getPage(settings.name),
          ),
        );
      },
    );
  }

  Widget _getPage(String? routeName) {
    switch (routeName) {
      case '/home':
        return HomePage();
      case '/login':
        return LoginPage();
      default:
        return LoginPage();
    }
  }
}

class AuthGuard extends StatelessWidget {
  final RouteSettings settings;
  final Widget child;

  const AuthGuard({required this.settings, required this.child});

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<bool>(
      future: checkPermissions(), // 异步权限检查
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Scaffold(body: Center(child: CircularProgressIndicator()));
        }

        if (snapshot.hasData && snapshot.data == true) {
          return child; // 权限通过，显示目标页面
        } else {
          // 权限不通过，跳转到登录页
          WidgetsBinding.instance.addPostFrameCallback((_) {
            Navigator.pushReplacementNamed(context, '/login');
          });
          return Scaffold(body: Center(child: Text('Redirecting...')));
        }
      },
    );
  }

  Future<bool> checkPermissions() async {
    // 模拟异步权限检查，如验证登录状态
    await Future.delayed(Duration(seconds: 1));
    return false; // 示例返回 false，实际根据业务逻辑调整
  }
}

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')));
  }
}

关键点：

异步检查：使用 FutureBuilder 处理异步权限验证，等待期间可显示加载界面。
路由重定向：权限失败时通过 Navigator 跳转到登录页或其他页面。
灵活性：可根据 RouteSettings 动态调整检查逻辑，支持不同页面的不同权限要求。