如何使用 axios 在反应中处理状态 401？

Question

i want to check if user is authorized or not, in my AuthContext

import React, {createContext,useState,useEffect} from 'react';
import AuthService from '../Services/AuthService';
export const AuthContext = createContext();
export default ({ children })=>{
const [user,setUser] = useState(null);
const [isAuthenticated,setIsAuthenticated] = useState(false);
const [isLoaded,setIsLoaded] = useState(false);

useEffect(()=>{
    AuthService.isAuthenticated()
    .then(data =>{
        setUser(data.user);
        setIsAuthenticated(data.isAuthenticated);
        setIsLoaded(true);
    })
    
},[]);

return (
    <div>
        {!isLoaded ? <h1>Loading</h1> : 
        <AuthContext.Provider value={{user,setUser,isAuthenticated,setIsAuthenticated}}>
            { children }
        </AuthContext.Provider>}
    </div>
)
}

and in Auth service i got this:

const Axios = require("axios");
export default{

isAuthenticated : ()=>{
    return  Axios({
        url: "http://localhost:4000/user/authenticated",
        method: "GET",
        
    }).then(res=>{
                if(res.status !== 401)
                    return res.json().then(data => data);
                else
                    return res.json({
                        isAuthenticated : false, 
                        user:{
                            firstName:" ",
                            lastName:" ",
                            email:" "}});
            })
      .catch(err=>console.log("authenticated error :"+err));
}

}

i got error Unhandled Rejection (TypeError): Cannot read property 'user' of undefined

11 | useEffect(()=>{

12 | AuthService.isAuthenticated()

13 |.then(data =>{

14 | setUser(data.user); // Error

15 | setIsAuthenticated(data.isAuthenticated);

16 | setIsLoaded(true);

17 | })

i test it in postman and i got what i expected

Answer 1

Just return the object instead of calling res.json

                return {
                    isAuthenticated : false, 
                    user:{
                        firstName:" ",
                        lastName:" ",
                        email:" "}};