前面我们已经解决了：

• Token 怎么生成
• Token 怎么发送
• Token 怎么验证

但 React 还有一个自己的问题：

例如导航栏要决定显示：

Login

还是的观点是。

Logout
Pay

痛点：如果仅靠 localStorage，页面无法即时感知登录状态，导致 UI 与真实状态不一致。其实，

一、浏览器存储和 React 状态不是一回事

从登录成功以后来看。

localStorage.setItem;

浏览器当然记住了 Token。

React 组件要不要重新渲染？这不是 localStorage 自动帮你解决的。

痛点：localStorage 的变更不会触发 React 的重新渲染，UI 不会自动更新。

React 更关心的是：

需要一个专门管理：

token & user

的地方。这就是 Store，

二、为什么不直接用 Props？

假设 App 有：

Nav | Login | Home | Pay

登录后拿到了 token & user，但 Nav、Pay 等都需要这个信息。按理说，

If 使用 Props。则可能需要一层一层往下传。

登录状态明显属于整个应用共享的数据，所以很适合放到全局 Store。

三、创建 Zustand Store

先创建目录这方面，

src/store/

从接下来文件来看。

src/store/user.js

代码示例这方面，

import { create } from 'zustand';export const useAuthStore = create(set => ({
再看token，''。
user: null,setAuth: => {
// ...
},logout: => {
// ...
}
}));

说明:

• "create)" 看起来很奇怪，但它告诉 Zustand “这个 Store 包含哪些 state 和方法”。
• "set" 是 Zustand 提供的修改 state 的函数。老实说，
• "set" 就是把 store 内的 token 和 user 改掉。
• 再看痛点。初学者常被这种闭包写法吓到，导致实现错误。
• 再看方法。先把它拆开来看，再一步步完成。
• 说到好处，state 在内存中；每次调用 set 时都会触发订阅组件重新渲染。
• 可在 setAuth 内部写入 localStorage，以持久化数据。话说回来，
• 这样既能让 UI 实时响应。也能保持刷新后数据不丢失。
.

五、Store里面保存什么？

六、为什么 Store 初始化时还要读取 localStorage？

# 当你刷新页面时会发生什么?