如何在页面重新加载后将令牌保持在 Redux 状态？

Question

所以我在我的项目上使用 Redux-Toolkit Query，并且我有一个 authSlice，我在其中保存经过身份验证的用户信息和 access_token。

我还将此信息保存在本地存储中，因此每当我重新加载页面时，我都可以从本地存储中获取值并将它们保存在状态中。

问题是我有一个 RequiredAuth 组件，它通过检查状态中是否有 access_token 来检查尝试访问特定路由的用户是否经过身份验证，它工作正常，除非我在经过身份验证时重新加载此页面我会被重定向到我的登录页面。

RequiredAuth 组件代码：

import { useLocation, Navigate, Outlet } from "react-router-dom";
import { useSelector } from "react-redux";
import { selectToken } from "./authSlice";


const RequireAuth = () => {
  const token = useSelector(selectToken)
  const location = useLocation()

  return (
    token ? <Outlet /> : <Navigate to="/auth/login" state={{ from: 
location}} replace />
  )
}

export default RequireAuth

重新加载页面时从本地存储获取用户信息和令牌并将其添加到状态的代码：

import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { setCredentials, selectToken } from '../features/auth/authSlice';


const Header = () => {
  const dispatch = useDispatch()
  const [user, setUser] = useState(JSON.parse(localStorage.getItem('profile')))
  const stateToken = useSelector(selectToken)

  useEffect(() => {
    if(user?.access_token && !stateToken) {
      dispatch(setCredentials({ user: user.user, access_token: user.access_token }))
    }
  }, [])

  // Omited code, not relevant



  return (
    <header className='nav-bar'>
      // Omited code, not relevant
    </header>
  )
}

export default Header

我相信每当我重新加载需要对用户进行身份验证的页面时，都会发生这种情况：在“RequiredAuth”中，我将从状态中获得一个空的 access_token，因此我会被重定向，然后我的 useEffect 会将本地存储数据复制到状态.

我通过将 RequiredAuth 组件更改为此来解决此问题：

import { useLocation, Navigate, Outlet } from "react-router-dom";

const RequireAuth = () => {
  const profile = JSON.parse(localStorage.getItem('profile'))
  const location = useLocation()

  return (
    profile?.access_token ? <Outlet /> : <Navigate to="/auth/login" state={{ from: 
  location}} replace />
  )
}

export default RequireAuth

但是我想知道是否有更好的方法在重新加载页面后保持数据状态以解决这个问题，因为从本地存储中获取它感觉违反直觉，因为数据将在 useEffect 逻辑完成后存储在状态中.

Answer 1

您无法通过刷新来保留数据。 无论如何，你可以使用redux-persist 。 这个包将数据保存在本地存储中，并在刷新时自动填充存储。

Answer 2

我认为这个redux-persist包可以提供帮助。 它基本上将您的状态存储在 localStorage/sessionStorage 中，并且每次刷新页面时它都会重新隐藏您的状态。

Answer 3

您必须将 redux-persist 与 rtk 一起用于商店令牌。 上面的方法，如果你导航到其他路线，它会工作正常。 假设你刷新页面你将重定向到登录页面参考 redux-persist