如果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

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

从react-router 导入纯Router 并将历史对象作为道具传递：

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

...

<Router history={history}>
  ...
</Router>

在getUser 操作中导入并使用history：

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,
};