从 axios 响应中反应更新状态

Question

我一直在尝试构建此身份验证验证组件，但一直卡住了。

我想做的是向我的后端服务器发出 axios get 请求以验证是否用户已登录。后端部分工作正常。请记住，cookie 在存在时发送。发生的事情是我将用户的 cookies & headers 与请求一起发送到后端，然后服务器对其进行验证，然后发回成功响应。我正在尝试根据 axios 响应更改反应 useState 的状态。

这是我当前的代码：

import { useEffect, useState } from 'react';
import { Navigate, Outlet } from 'react-router-dom';
import apiurl from '../axios'; // custom axios interceptor

const AuthVerifyFunction = () => {
    const [isAuth, setIsAuth] = useState();

    const config = {
        headers: {
            "Content-Type": "application/json",
            "X-Requested-With": "XMLHttpRequest"
        }
    }

    const verifyAuth = () => {
        apiurl.get('/api/auth/verify', config)
            .then(res => {
                setIsAuth(res.data.success)
                console.log(res)
                console.log("isAuth:", isAuth);
            })
            .catch(err => {
                console.log(err)
            });
    }

    useEffect(() => {
        verifyAuth();
    }, []);

    return (
        <h1>{isAuth ? <Outlet /> : <Navigate to="/login" />}</h1>
    )

}

export default AuthVerifyFunction;

这是我返回的成功响应：

{data: {…}, status: 200, statusText: 'OK', headers: {…}, config: {…}, …}
  config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}
  data: {success: true, authHeader: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZC…Tg4fQ.lX8piOnRb9-MQCS8mibMSmFfjBcCeTaC7sw-DgdwBl8'}
  headers: {content-length: '230', content-type: 'application/json; charset=utf-8'}
  request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: true, upload: XMLHttpRequestUpload, …}
  status: 200
  statusText: "OK"
  [[Prototype]]: Object

我一直坚持的部分是我不知道如何在异步响应之前不重定向用户，或者简单地说，我只想在 response.data.success 时显示出口是 true，如果不是，则将它们重定向到 /login。

如果有任何其他更好的方法可以做到这一点，请告诉我。提前谢谢你。

Answer 1

也许你应该声明你的初始状态，这样它就不会为空

 const [isAuth, setIsAuth] = useState(false);

Answer 2

您可以使用 isLoading 状态：当您收到来自 API:

的响应时，将其设置为 false

import { useEffect, useState } from 'react';
import { Navigate, Outlet } from 'react-router-dom';
import apiurl from '../axios'; // custom axios interceptor

const AuthVerifyFunction = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [isAuth, setIsAuth] = useState();

  const config = {
    headers: {
      'Content-Type': 'application/json',
      'X-Requested-With': 'XMLHttpRequest',
    },
  };

  const verifyAuth = () => {
    apiurl
      .get('/api/auth/verify', config)
      .then((res) => {
        setIsAuth(res.data.success);
        setIsLoading(false);
        console.log(res);
        console.log('isAuth:', isAuth);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  useEffect(() => {
    verifyAuth();
  }, []);

  return (
    <h1>
      {isLoading ? (
        'Authenticating...'
      ) : isAuth ? (
        <Outlet />
      ) : (
        <Navigate to='/login' />
      )}
    </h1>
  );
};

export default AuthVerifyFunction;

从 axios 响应中反应更新状态

React update state from the axios response

authentication

request

reactjs

axios