reactjs - 如果 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来自这样的 Action 、实用程序或回调的组件，并期望它被呈现并影响到新路由的重定向。您可以选择访问 history对象并调用命令式重定向。
选项1
使用 connected-react-router 将您的路由器连接到 redux .基本要点是创建一个自定义的“createRootReducer”函数，创建一个 history对象，使用“ConnectedRouter”组件。这允许您调度 redux 操作来影响应用程序中的导航操作。
按照步骤设置路由并将其连接到您的 redux 存储。
要在您的异步操作中使用:

import { replace } from 'connected-react-router';

...

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();

导入普通 Router来自 react-router并将历史对象作为 Prop 传递:

import { Router } from 'react-router';
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,
};