基于Flutter实现会话Token校验与AutoRoute自动路由跳转

需求说明 #

在Flutter应用启动阶段，校验会话Token并自动跳转路由：

• 存在有效Token时，跳转至DashboardRoute
• 无有效Token时，跳转至LoginRoute

原实现中的问题 #

1. 实例不共享：main函数中单独创建的AuthServices实例，与MultiProvider注入的实例是两个独立对象，提前获取的Token无法同步到全局状态中。
2. 路由叠加：在FutureBuilder中直接调用push方法，会导致新路由叠加在初始路由之上，而非替换启动页。
3. 重复请求：main和FutureBuilder中两次调用getToken，造成不必要的重复操作。

修正后的实现代码 #

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化AuthServices并获取Token，确保全局单例
  final AuthServices auth = AuthServices();
  await auth.getToken();

  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider.value(value: auth), // 注入已初始化的实例
        ChangeNotifierProvider(create: (context) => AssetsServices()),
        ChangeNotifierProvider(create: (context) => ConsentServices()),
        ChangeNotifierProvider(create: (context) => DashboardServices()),
        ChangeNotifierProvider(create: (context) => HelpServices()),
        ChangeNotifierProvider(create: (context) => JobsService()),
        ChangeNotifierProvider(create: (context) => PermissionServices()),
        ChangeNotifierProvider(create: (context) => SettingsService()),
      ],
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  final AppRouter appRouter = AppRouter();

  @override
  Widget build(BuildContext context) {
    final AuthServices auth = Provider.of<AuthServices>(context);

    return MaterialApp.router(
      debugShowCheckedModeBanner: false,
      routerConfig: appRouter.config(
        // 基于Token状态设置初始路由
        initialRoutes: [
          auth.token.isEmpty ? const LoginRoute() : const DashboardRoute()
        ],
      ),
      theme: CustomTheme.themeData,
      builder: (context, router) {
        // 路由未初始化时显示加载指示器
        if (router == null) {
          return const Center(child: CircularProgressIndicator());
        }
        return router;
      },
    );
  }
}

优化说明 #

• 全局单例同步：在main中初始化AuthServices并获取Token后，通过ChangeNotifierProvider.value注入，确保全局使用同一个实例，状态同步一致。
• 初始路由配置：直接通过appRouter.config的initialRoutes参数设置启动路由，从根源避免路由叠加问题。
• 简化加载逻辑：在builder中判断路由初始化状态，未完成时显示加载指示器，无需重复调用Token校验接口。

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