javascript - 从 axios 实例拦截器导航到其他屏幕

Question

我在 React 项目中使用 Axios，并为我想创建 Axios 实例并使用拦截器的错误编写一些通用代码。

以下是我的 React Routes 代码

import React, { Component } from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./scenes/Home";
import { ProtectedRoute } from "./_hoc/ProtectedRoute";
import Admin from "./scenes/Admin";
import Login from "./components/Auth/Login";

export default class Routes extends Component<any, any> {
  render() {
    return (
      <div>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/login" component={Login} />
          <ProtectedRoute exact path="/admin" component={Admin} />
        </Switch>
      </div>
    );
  }
}

以下是我的 Axios 实例的代码

import axios from "axios";

const axiosInstance = axios.create({
  baseURL: `http://localhost:55266/api/`
});

axiosInstance.interceptors.request.use(request => {
  if (request.url != "/Login/Authenticate") {
    //TO DO
    //request.headers["Authorization"] = "Bearer";
  }
  return request;
});

axiosInstance.interceptors.response.use(
  response => {
    if (
      response.request.responseURL ==
      response.config.baseURL + "Login/Authenticate"
    ) {
      localStorage.setItem("TAGAuthToken", response.data.data.token);
      //I DON'T WANT THIS PAGE TO GET RELOADED.
      window.location.href = "/Admin";
    }
    return response;
  },
  error => {
    return Promise.reject({ ...error });
  }
);
export default axiosInstance;

我不想通过使用 window.location 重新加载页面，但想通过历史浏览。我无法获得如何实现这一目标的线索。

我在各种教程中看到的方式是他们说使用路由器而不是交换机并使用历史 v4 库，然后我们可以在任何地方使用历史，但我想坚持使用交换机而不是路由器。

期待有价值的回应。

注意：我已经检查了使用反应路由器以编程方式导航的帖子，但这并不能回答我的问题。我想从 AxiosInstance 文件中导航。它可以通过 History NPM 包实现，但需要使用路由器，但根据我的要求，我需要使用 Switch

标签： javascriptreactjstypescriptaxios