14、高级 React 开发与 Reactagram 社交应用搭建

高级 React 开发与 Reactagram 社交应用搭建

1. 登录及状态处理

在进行应用开发时，我们首先要处理用户登录及登录状态的保持。

1.1 登录尝试

可以通过输入用户名和密码来尝试登录，提示信息表明使用组合 “darth/vader” 或 “john/sarah” 能够成功登录。登录后，你可以通过开发者工具栏中的操作按钮即时导航应用状态。

1.2 处理页面刷新问题

当应用开发完成且用户能够登录后，会面临一个问题：页面刷新时登录信息会丢失。这显然不是一个好的用户体验，为了解决这个问题，我们需要在初始化时将之前的状态注入到存储中。我们可以使用 sessionStorage 来存储数据，它与 localStorage 类似，但 sessionStorage 中的数据在页面会话结束时会被清除，而 localStorage 中的数据没有过期设置。

具体操作步骤如下：
1. 修改 actions/login.js 文件 ：

export function setLoginDetails(json) {
  const loginData = {
    type: LOGIN_USER,
    loginResponse: json,
    timestamp: Date.now()
  };
  sessionStorage