用户登录成功以后可以存储用户的登录状态，可以在浏览器的本地存储里面存储当前用户相关的数据，比如用户的 id，名字还有用户的令牌。刷新页面，重载应用的时候，可以从浏览器的本地存储里读取当前用户相关数据，然后恢复一下用户的登录状态。

打开 auth.provider，在这个组件里可以处理一下用户的登录状态，用一下 useEffect ，第一个参数是一个回调，第二个参数是依赖的数据列表，里面添加一个 currentUser。这样只有这个数据有变化的时候才会执行这个效应。

在这个回调里先判断一下currentUser 不等于 undefined ，如果是的话就执行一下 setStorage 在本地存储里存储点数据，数据的名字是 StorageKey.currentUser，数据的值是 currentUser。

else，不然的话，声明一个 currentUserFromStorage，它的值可以用一下 getStorage 从本地存储里读取数据，类型参数设置成 CurrentUser。要读取的数据的名字是 StorageKey.currentUser。

下面判断一下，如果 currentUserFromStorage 有值，就可以执行一下 setCurrentUser，修改一下 currentUser 这个 state 的值，把 currentUserFromStorage 交给它。

测试

到浏览器上测试一下，打开浏览器的开发者工具，应用，这个选项卡，观察一下本地存储空间。

在登录页面，输入用户名，还有用户的密码，点击登录。成功以后，你会发现，在本地存储空间这里会出现一条名字是 currentUser 的数据，它的值就是登录成功以后获取到的一些数据，比如用户的 id，名字还有令牌。

刷新一下应用的页面，应用重载以后，现在它会读取在浏览器本地存储空间里存储的这个 currentUser 数据，然后恢复一下，也就是把它的值交给应用里的 currentUser 这个状态。在页面头部这里显示的就是当前登录的用户的名字。