DEV Community
·
观察者模式 - 实用的React示例
💡
原文英文，约2400词，阅读约需9分钟。
📝
内容提要
本文介绍了如何在现代Web应用中使用观察者模式实现令牌轮换和用户会话计时器。通过发布者和多个订阅者的机制，观察者模式简化了复杂功能的实现。文章详细讲解了如何在React中集成此模式，以确保令牌状态变化时相关组件实时更新，从而提升用户体验。
🎯
关键要点
- 本文介绍了如何在现代Web应用中使用观察者模式实现令牌轮换和用户会话计时器。
- 观察者模式通过发布者和多个订阅者的机制简化了复杂功能的实现。
- 令牌轮换是现代身份验证系统中的标准模式，涉及短期访问令牌和长期刷新令牌。
- 在令牌过期后，应用程序会返回401未授权错误，并使用刷新令牌获取新的令牌对。
- 为了提升用户体验，增加了一个会话计时器，实时显示用户会话的剩余时间。
- 传统实现方式需要复杂的属性传递或上下文提供者，而观察者模式提供了优雅的解决方案。
- 通过Axios的请求拦截器自动附加访问令牌，确保每个API请求都包含当前的身份验证令牌。
- 实现令牌刷新逻辑时，需要扩展Axios的类型系统以防止无限令牌轮换循环。
- 创建响应拦截器以自动检测身份验证失败并触发令牌刷新周期。
- 使用观察者模式创建一个中心组件，维护订阅者注册并在令牌状态变化时通知它们。
- 通过单例模式确保令牌存储在整个应用中作为单一真相源。
- 使用React的useSyncExternalStore钩子将观察者模式与React的渲染系统连接。
- 实现了一个会话即将过期的警报组件，提醒用户采取行动。
- 观察者模式将复杂的身份验证挑战转化为干净、可维护的解决方案，确保令牌轮换系统与React UI无缝连接。
❓
延伸问答
观察者模式在React中如何实现令牌轮换？
观察者模式通过创建一个中心组件，维护订阅者注册，并在令牌状态变化时通知它们，从而实现令牌轮换。
如何在Axios中自动附加访问令牌？
通过注册请求拦截器，自动将当前的访问令牌附加到每个API请求的头部。
会话计时器的作用是什么？
会话计时器实时显示用户会话的剩余时间，提升用户体验。
如何处理令牌过期后的401错误？
在接收到401错误后，使用刷新令牌请求新的令牌对，并自动重试原始请求。
使用观察者模式有什么优势？
观察者模式简化了复杂功能的实现，避免了紧耦合，使得不同组件能够实时更新。
如何在React中连接观察者模式与渲染系统？
使用React的useSyncExternalStore钩子，可以将观察者模式与React的渲染系统连接，确保组件在状态变化时重新渲染。
➡️
