logo

该视频仅会员有权观看

立即开通课程「React.js 前端应用开发实践」权限。

¥
199
/ 年

在 React 应用里存储与恢复用户登录状态

  • 用户登录成功后,可以在浏览器本地存储中保存登录状态和用户数据(ID、名字、令牌)。
  • 页面刷新或应用重载时,可以从本地存储读取用户数据以恢复登录状态。
  • 使用os provider组件和use effect钩子处理登录状态,依赖列表中包含current user。
  • current user变化时触发回调,若用户不为undefined,则存储数据到本地;若无数据,则从本地读取。
  • 浏览器开发者工具可用于观察本地存储空间和登录过程中存储的数据。
  • 应用重载后,将本地存储的用户数据读取出来,并赋值给应用状态,以在页面上显示当前登录用户名。