Flutter中登录后如何存储UserID并在其他页面访问

采用官方维护的轻量本地键值存储库shared_preferences实现，不需要额外服务端支持，读写性能足够满足用户ID这类简单数据的存储需求，实现步骤如下：

1. 引入依赖 #

在项目根目录的pubspec.yaml文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  # 本地KV存储依赖
  shared_preferences: ^2.2.2
  # 你项目中已使用的http等其他依赖保持原样即可

保存后执行命令flutter pub get完成依赖安装。

2. 封装本地存储工具类 #

新建存储工具文件，统一管理所有本地数据读写逻辑，避免重复编写SharedPreferences实例获取代码：

import 'package:shared_preferences/shared_preferences.dart';

class StorageUtil {
  static late SharedPreferences _prefs;

  // 应用启动时全局初始化一次，避免每次读写都等待异步加载
  static Future<void> init() async {
    _prefs = await SharedPreferences.getInstance();
  }

  // 写入UserID
  static Future<void> setUserID(String userID) async {
    await _prefs.setString('login_user_id', userID);
  }

  // 读取UserID
  static String? getUserID() {
    return _prefs.getString('login_user_id');
  }

  // 清除登录用户数据（退出登录时调用）
  static Future<void> clearLoginData() async {
    await _prefs.remove('login_user_id');
  }
}

在应用入口main.dart中提前初始化存储工具，确保后续页面可以直接同步读取数据：

void main() async {
  // 绑定插件机制，确保异步初始化正常执行
  WidgetsFlutterBinding.ensureInitialized();
  // 初始化本地存储
  await StorageUtil.init();
  runApp(const MyApp());
}

3. 修改登录接口逻辑，登录成功后写入UserID #

在你原有登录方法的登录成功分支中，加入UserID存储逻辑，调整后对应代码段如下：

if (response.statusCode == 200) {
  var data = jsonDecode(response.body);
  print(data);
  // 提前取出UserID做判空
  String? userID = data['data']['UserID']?.toString();
  print(userID);

  if (userID == null) {
    ScaffoldMessenger.of(context)
        .showSnackBar(const SnackBar(content: Text("账号或密码错误")));
  } else {
    // 等待UserID写入本地完成后再做跳转
    await StorageUtil.setUserID(userID);
    // 异步操作后校验context有效性，避免组件销毁后触发路由报错
    if (!context.mounted) return;
    // 替换路由跳转，避免登录页留在栈内
    Navigator.pushReplacement(
        context, MaterialPageRoute(builder: (context) => const Homescreen()));
    ScaffoldMessenger.of(context)
        .showSnackBar(const SnackBar(content: Text("登录成功")));
  }
}

注意：原代码中使用Navigator.push跳转首页会保留登录页在路由栈，用户按返回键会退回登录页，不符合常规登录交互逻辑，建议替换为pushReplacement。

4. 任意页面读取UserID #

不需要通过路由传参，所有页面都可以直接调用工具类同步获取已存储的UserID：

// 比如在首页的initState中获取
@override
void initState() {
  super.initState();
  // 直接同步读取，不需要await
  String? currentUserID = StorageUtil.getUserID();
  print("当前登录用户ID：$currentUserID");
  // 后续可以用该ID请求用户专属接口、做权限判断等
}

补充注意事项 #

• 存储操作是异步逻辑，一定要等setUserID执行完成后再做页面跳转，避免跳转后立刻读取时数据还未写入完成。
• 如果后续需要存储更多用户信息（比如用户名、头像、手机号、用户类型），直接在StorageUtil中新增对应字段的读写方法即可，不建议直接把整个用户JSON转成字符串存储，拆分字段更便于后续维护。
• 退出登录时必须调用StorageUtil.clearLoginData()清除本地存储的用户数据，避免多账号切换时出现数据串扰。
• 应用冷启动时可以直接读取UserID判断登录态：如果UserID不为空直接进入首页，为空则进入登录页，实现免登录效果。

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