如果 error.status == 401 如何重定向用户？

Question

我的目标是如果请求的代码等于401，则重定向用户。我编写了以下代码，但它显示错误401。它显示401（来自console.log，但低于错误）。如果错误等于401，如何实现重定向？

import axiosConfig from "../../config/axios";
import actions from "./actions";
import { Redirect } from "react-router";
const fetchUser = async () => {
    const response = await axiosConfig.get('api/get-user')
        .catch(function (error) {
            console.log(error.response.status) // 401
            console.log(error.response.data.error) //Please Authenticate or whatever returned from server
            if (error.response.status == 401) {
                return(
                    <Redirect
                        to={{
                            pathname: '/login',
                            state: { from: location },
                        }}
                    />
                );
            }
        });
    return response.data
}
export const getUser = () =>
    async (dispatch) => {
        const user = await fetchUser()
       dispatch(actions.setUser(user));
    }

@更新 路由设置

const Container = () => {
    return (
        <div className="container">
                            <Router>
                                <Switch>
                                    <Route path="/login">
                                        <Login />
                                    </Route>
                                    <Route path="/register">
                                        <Login />
                                    </Route>
                                        <Route path="/all-users">
                                            <Alltasks />
                                        </Route>
                                        <Route path="/all-articles">
                                            <AllUsers />
                                        </Route>
                                </Switch>
                            </Router>
                            <ToastContainer />
        </div>
    );
}

Answer 1

您不能从像这样的操作、实用程序或回调返回

Redirect

组件，并期望它被渲染并实现到新路由的重定向。您的选择是访问

history

对象并调用命令式重定向。

选项1

• React-Router v6

  使用 Redux-First-History 连接路由器和 Redux。

• React-Router v4/5

  使用 connected-react-router 将你的路由器连接到 redux。

基本要点是创建一个自定义的“createRootReducer”函数，创建一个

history

对象。这允许您分派 redux 操作来影响应用程序中的导航操作。

按照步骤设置路由并将其连接到您的 redux 存储。

在异步操作中使用：

import { replace } from 'connected-react-router'; // RRD v4/5
import { replace } from "redux-first-history";    // RRD v6

...

const fetchUser = async () => {
  try {
    const response = await axiosConfig.get('api/get-user');
    return response.data;
  } catch (error) {
    if (error.response.status == 401) {
      throw new Error(error);
    }
  }
}

export const getUser = () => async (dispatch) => {
  try {
    const user = await fetchUser();
    dispatch(actions.setUser(user));
  } catch {
    dispatch(replace('/login'));
  }
}

选项2

创建历史对象并在

getUser

操作中导入和使用。

创建内存、哈希或浏览器历史记录对象：

import { createBrowserHistory } from 'history';

export const history = new createBrowserHistory();

• React-Router v4/5

  从

  Router

  导入普通的

  react-router

  并将历史对象作为 prop 传递：

  import { Router } from 'react-router-dom';
  import { history } from '../path/to/custom/history';
  
  ...
  
  <Router history={history}>
    ...
  </Router>
  

• React-Router v6

  从

  HistoryRouter

  导入普通的

  react-router

  并将历史对象作为 prop 传递：

  import { unstable_HistoryRouter as Router } from 'react-router-dom';
  import { history } from '../path/to/custom/history';
  
  ...
  
  <Router history={history}>
    ...
  </Router>
  

在

history

操作中导入并使用

getUser

：

import { history } from '../path/to/custom/history';

...

const fetchUser = async () => {
  try {
    const response = await axiosConfig.get('api/get-user');
    return response.data;
  } catch (error) {
    if (error.response.status == 401) {
      throw new Error(error);
    }
  }
}

export const getUser = () => async (dispatch) => {
  try {
    const user = await fetchUser();
    dispatch(actions.setUser(user));
  } catch {
    history.replace('/login');
  }
}

选项3

将

history

对象传递给

getUser

操作。

const fetchUser = async () => {
  try {
    const response = await axiosConfig.get('api/get-user');
    return response.data;
  } catch (error) {
    if (error.response.status == 401) {
      throw new Error(error);
    }
  }
}

export const getUser = (history) => async (dispatch) => {
  try {
    const user = await fetchUser();
    dispatch(actions.setUser(user));
  } catch {
    history.replace('/login');
  }
}

用途：

import { useHistory } from 'react-router-dom';

...

const history = useHistory();

...

getUser(history);

...

const mapDispatchToProps = {
  getUser,
};