React Native如何实现多用户场景下用户名密码自动填充

登录自动填充效果参考

整体和你现有token登录态逻辑完全兼容，不需要改动原有登录/登出的主流程，只需要额外加三个模块的逻辑即可：

1. 本地历史账号存储 #

首先把历史账号凭据和当前生效的登录token分开存储，不要混在一起：

• 用户主动登出时，只清除当前登录态的有效token，不要删除该用户的账号记录，这是实现自动填充的前提
• 本地用加密存储组件存历史账号，单条记录包含3个字段：用户名（作为唯一标识）、加密后的密码、最后一次登录的时间戳
  • 安卓端直接用EncryptedSharedPreferences或者Room数据库配合SQLCipher加密，iOS端用Keychain存储即可，绝对不要明文存密码
• 每次用户登录成功（不管是手动输入登录还是自动填充登录），都检查本地存储：如果该用户名已有记录就更新密码和最后登录时间，没有就新增一条记录

2. 输入匹配与填充交互 #

逻辑非常简单，给用户名输入框加文本变化监听就能实现：

• 当用户名输入框内容长度≥1时，遍历本地存储的所有历史账号，筛选出用户名以当前输入内容为前缀的记录，按最后登录时间倒序排序
• 分场景处理匹配结果：
  • 只匹配到1条完全符合前缀规则的记录：直接把用户名补全到输入框，对应密码填充到密码输入框，用户确认后直接点登录即可
  • 匹配到多条记录：在输入框下方弹出下拉候选列表，只展示匹配到的用户名（密码绝对不能在候选列表里明文展示），用户点击某条候选后，再自动填充对应密码到密码框
• 用户清空用户名输入框时，同步清空密码框内容、隐藏候选列表，避免错填

3. 边界场景兼容 #

• 加个历史记录清理入口：在登录页放个不显眼的「清除所有历史登录账号」选项，点击后清空本地所有存储的历史凭据，适配公用设备的隐私需求
• 密码错误兜底：如果自动填充的密码提交后返回账号密码错误，自动清除该条记录里存储的旧密码，提示用户手动输入，等用户手动输入登录成功后再更新存储的新密码
• 不要锁死输入内容：自动填充后允许用户随意修改用户名或密码，用户修改后重新触发匹配逻辑即可，不要强制用户必须用填充的内容

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