Flutter Web客户端如何安全存储本地登录token？

首先明确Web环境的底层限制：所有存储在用户浏览器本地的数据（包括localStorage、IndexedDB、Cookie等），本质上对持有设备的用户都是可访问的，不存在100%无法被开发者工具读取的客户端存储方案，这是Web运行机制决定的。目前Flutter生态下没有支持Web端的安全存储类插件，本质就是因为Web侧无法调用原生端的Keychain/Keystore能力，不管是localStorage还是IndexedDB存储的内容都可以被直接查看，就算对token加密后存储，也面临密钥无处存放的问题。

针对你的需求，可按安全等级选择以下折中方案：

• 优先使用 HttpOnly + Secure + SameSite 属性的Cookie存储token
  该类型的Cookie无法被前端JS读取，也就避免了XSS攻击窃取token的风险，浏览器会在请求时自动携带，不需要你手动操作存储。虽然用户仍可以在开发者工具的Cookie面板看到值，但相比直接存在localStorage的明文token，被恶意脚本窃取的概率大幅降低。
• 缩短access_token有效期，搭配refresh_token机制
  将access_token的有效期设置为15~30分钟，即便被窃取也只能在短时间内生效。refresh_token可设置更长有效期，每次用refresh_token换新的access_token时，服务端同时返回新的refresh_token，旧的直接作废，大幅降低token泄露后的风险。
• 必要时对存储的token做对称加密，密钥拆分存储
  如果一定要用localStorage/IndexedDB存储，加密密钥不要和密文存在同一存储区域：可以将密钥的一部分通过服务端下发存在应用内存，另一部分用浏览器特征（设备指纹哈希）生成，拼接后作为完整密钥，大幅提升破解门槛。
• 高安全等级场景取消持久化存储
  如果业务对安全要求极高，直接将token仅存在应用内存中，用户关闭标签页或刷新后直接清空，下次打开需要重新登录，从根源避免本地存储泄露的问题。

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