在redux状态下存储经过身份验证的用户的最佳方式

wyyhbhjk  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(175)

我目前正在使用以下代码构建应用程序

  • Next.js
  • 快速API
  • Redux-Toolkit和RTK查询

我已经实现了所有的身份验证逻辑,但是遇到了一个问题。
因此,在成功登录后,express api返回2个包含访问/刷新标记的httponly cookie。
我在我的api中有一个使用访问令牌(即/api/auth/me)获取当前用户的端点
这一切都很好,但我想不出的是在每次页面加载时获取用户并将其存储在redux状态中的最佳方式。
我是否使用RTK查询来命中/api/auth/me端点,并在整个应用程序中需要时调用查询?
理想情况下,我在_app.tsx中获取和设置用户,但我不能使用redux调度,因为它在<Provider store={store}></Provider>之外
例如,如果我想使用getServerSideProps中的redux存储用户,我似乎也不能这样做,因为它不是客户端,不能访问redux。
我只是似乎找不到一个好方法来简单地设置认证用户,并能够在整个应用程序中全局使用它们,无论是在redux商店内部还是在getServerSideProps之类的地方。
任何建议都会是真正令人惊讶的,我完全迷失了方向。

0pizxfdo

0pizxfdo1#

持久化身份验证状态的一种方法是将令牌存储在本地存储中。在主App组件中,您可以检查该令牌是否存在于redux存储中。如果不存在,您可以在useEffect函数中手动设置它。
因此:

useEffect(() => {
fetchAuthTokenFromLocalStorage().then((token) => {
  dispatch(setAuthenticationResult(token));
});},[dispatch]);

相关问题