Here is my function:

    import axios from "axios";
    import { redirect } from "react-router-dom";

    let fetch = async (data, method, url, responseType, header) => {
        let requestObj = { "method": method, "url": url }
        if (method.toLowerCase() === "get") {
            requestObj.params = data;
        } else {
            requestObj.data = data;
        }
        if (responseType) {
            requestObj["responseType"] = responseType;
        }
        if (header) {
            requestObj["headers"] = header;
        }
        axios.interceptors.response.use(
            (response) => {
                return response;
            },
            (error) => {
                if (error.response.status === 401) {
                   console.log("Unauthorized");
                   return redirect("/login");
                }else {
                    return error;
                }
            }
        );
        let result = await axios(requestObj);
        return result;
    }

Because the word "Unauthorized" is shown in the console, that means I caught the response status 401, however, it does not forward the browser to the "/login" page, would you tell me why?

PS: I am using "react-router-dom": "^6.4.2".

CodePudding user response：

import axios from "axios";
import { useNavigate } from "react-router-dom";

let navigate = useNavigate();

let fetch = async (data, method, url, responseType, header) => {
    let requestObj = { "method": method, "url": url }
    if (method.toLowerCase() === "get") {
        requestObj.params = data;
    } else {
        requestObj.data = data;
    }
    if (responseType) {
        requestObj["responseType"] = responseType;
    }
    if (header) {
        requestObj["headers"] = header;
    }
    axios.interceptors.response.use(
        (response) => {
            return response;
        },
        (error) => {
            if (error.response.status === 401) {
               console.log("Unauthorized");
               return navigate("/login");
            }else {
                return error;
            }
        }
    );
    let result = await axios(requestObj);
    return result;
}

try to use useNavigate() instead of redirect this should work

CodePudding user response：

You can use browserHistory to redirect to another component

import { browserHistory } from 'react-router-dom';
     
    if (error.response.status === 401) 
    {
        console.log("Unauthorized"); 
        browserHistory.push('/login');
    }
    else 
    { 
        return error;
    }