reactjs - 如何使用本地存储、 react 钩子(Hook)和上下文提供程序保持状态持久性

我正在我的应用程序中实现身份验证，我遇到的问题是刷新状态不是持久的，所以我被重定向回登录屏幕。如何使用 React Hooks 检查 local storage 中是否有 authToken 以保持我在刷新时登录。

这是 我的 protected 路由 用于检查身份验证 token

<Route
    {...rest}
    render={
        props=>
            authTokens ? (
                <Component {...props}/>
            ) : (
                <Redirect
                    to ={
                        {
                            pathname: '/login',
                            state: {
                                from: props.location
                            }
                        }
                    }
                />

这是我的 登录页面 功能

 function Login(props) {
const [isLoggedIn, setLoggedIn] = useState(false);
const [isError, setIsError] = useState(false);
const [firstName, setUserName] = useState("");
const [password, setPassword] = useState("");
const { setAuthTokens } = useAuth();

function postLogin() {
    axios.post("http://10.6.254.22:5000/userinformation/login", {
      firstName,
      password
    }).then(result => {
      if (result.status === 200) {
        console.log('You have been logged in as user: ' +result.data[0].firstName)
        setAuthTokens(result.data);
        setLoggedIn(true);
      } else {
        setIsError(true);
      }
    }).catch(e => {
      setIsError(true);
    });
  }


  if (isLoggedIn) {
    return <Redirect to="/" />;
  }

下面是我的 Hook 包含状态

    const [authTokens, setAuthTokens] = useState();

  const setTokens = (data) => {
    localStorage.setItem("authTokens", JSON.stringify(data));
    setAuthTokens(data);
  }

  useEffect(()=> {
    let jsonToken = localStorage.getItem('authTokens', JSON.stringify(authTokens))
    console.log('JSON TOKEN  -----' + jsonToken)
    setAuthTokens(jsonToken)
  })

我如何在加载时使用 local storage 变量设置状态 authTokens ，以便当我刷新状态时，状态不是空的，所以我不会在页面重新加载时注销。还要提一下 上下文提供程序 设置如下:

<AuthContext.Provider value={{ authTokens, setAuthTokens: setTokens}}>
   <ProtectedRoute path="/" exact component={ProfileBox}/>
</AuthContext.Provider>

最佳答案

问题是 authTokens 是 undefined 当您的组件安装时，因此您的 protected 路由 的逻辑正在评估代码的 Redirect 部分，导致重定向到 /login 。

React 将删除 componentWillMount 钩子(Hook)，因此，我发现这个特定问题的解决方案是还检查 localStorage 中的 token ，而不是仅检查状态 authTokens 。

这样，您的代码将能够评估您是否拥有 token (甚至在第一个组件更新之前)。

您的 Protected Route 代码可能如下所示:

<Route
    {...rest}
    render={
        props=>
            (authTokens || localStorage.getItem("authTokens")) ? (
                <Component {...props}/>
            ) : (
                <Redirect
                    to ={
                        {
                            pathname: '/login',
                            state: {
                                from: props.location
                            }
                        }
                    }
                />

其他可能的解决方案是:

使用上下文

使用 Redux

但是我觉得如果你只是想保护私有(private)路由，这个方案就足够了

关于reactjs - 如何使用本地存储、 react 钩子(Hook)和上下文提供程序保持状态持久性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58751020/