Question

我正在使用create-react-app，react-redux，react-thunk，react-router创建一个React应用程序。

我在验证后设置了localstorage变量“current_user”，以便我可以设置我的Restricted Routers。

我正在使用Axios来发出ajax请求，在我最初的index.js文件中，我设置了一个全局Axios拦截器，这样如果任何ajax调用返回401，它会自动清除本地存储“current_user”。我希望它也可以重定向到/ Login。

我能够以老式的方式（即window.location）执行此操作但是，有没有办法将此全局函数设置为从应用程序中的任何位置重定向到登录页面？

全球拦截器：

index.js

import "materialize-css/dist/css/materialize.min.css";
import "jquery/dist/jquery.min.js";
import "materialize-css/dist/js/materialize.min.js";
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import reduxThunk from 'redux-thunk';
import axios from "axios";

import App from "./components/App";
import reducers from './reducers';

const store = createStore(reducers, {}, applyMiddleware(reduxThunk));

axios.interceptors.response.use(undefined, function (error) {
  if(error.response.status === 401) {    //Setup Global Config
    localStorage.setItem('current_user', null);
   //Would like to redirect to /Login here
  }
});

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.querySelector("#root")
);

Answer 1

您可以尝试这样的事情：

import createHistory from 'history/createBrowserHistory';


const history = createHistory({
 window.location.pathname,
});

// ...

if(error.response.status === 401) {
   // ...
   history.push('/login');
}

如果您在localStorage中没有令牌，可以在此处找到另一种重定向用户的方法：https://github.com/strapi/strapi-examples/blob/master/login-react/react-login-front-end-app/app/containers/WithAuth/index.js

Answer 2

只需使用：return <Redirect to="/login" />。那应该做。

从功能重定向React路由器

2 个答案: