Flutter中会话过期或收到401响应时如何弹窗或跳转登录页

步骤1：配置全局导航键 #

首先在项目入口（如main.dart）定义全局导航键，确保在Dio错误处理中能获取到上下文：

final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

// 在MaterialApp中配置
MaterialApp(
  navigatorKey: navigatorKey,
  // 其他配置项...
);

步骤2：修改401错误分支逻辑 #

导入所需包后，在你的Dio错误处理代码中添加以下逻辑：

import 'package:flutter/material.dart';
import 'package:flutter_secure_storage/flutter_secure_storage.dart';

// ... 其他代码

else if (e.response?.statusCode == 401) {
  // 清除本地存储的过期令牌
  const storage = FlutterSecureStorage();
  await storage.delete(key: 'user_token'); // 替换为你存储令牌的实际Key

  // 弹窗提示并跳转登录页
  showDialog(
    context: navigatorKey.currentContext!,
    barrierDismissible: false,
    builder: (context) => AlertDialog(
      title: const Text('登录过期'),
      content: const Text('您的登录状态已过期，请重新登录'),
      actions: [
        TextButton(
          onPressed: () {
            Navigator.pop(context);
            // 跳转登录页并清空路由栈，防止返回之前的页面
            navigatorKey.currentState?.pushNamedAndRemoveUntil(
              '/login', // 替换为你的登录页路由名称
              (route) => false,
            );
          },
          child: const Text('确定'),
        ),
      ],
    ),
  );
}
print(getDioException(e));
throw Exception(getDioException(e));

可选：直接跳转（无弹窗） #

如果不需要弹窗提示，可简化为：

else if (e.response?.statusCode == 401) {
  const storage = FlutterSecureStorage();
  await storage.delete(key: 'user_token');

  // 直接跳转登录页并清空路由栈
  navigatorKey.currentState?.pushNamedAndRemoveUntil(
    '/login',
    (route) => false,
  );
}

注意事项 #

• 替换代码中的user_token和/login为你项目中实际的令牌存储Key和登录页路由
• 若在Dio拦截器中处理，需确保异步操作完成后再处理后续逻辑，避免请求异常
• 使用pushNamedAndRemoveUntil可清空路由栈，防止用户通过返回键回到过期登录状态的页面

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