Question

这是我代表“登录”页面的组件

import { HttpService } from 'src/assets/js/httpservice';
// ** omissis other imports **

export default class PrivatePage extends React.Component {
    constructor(props) {
        super(props);
    }

    public render() {
        return (
            <div>
                <ul>
                    <li>
                        <InputText name="Text" id="Text" />
                    </li>
                    <li>
                        <InputText name="Email" id="Email" />
                    </li>
                    <li>
                        <Button onClick={this.send} label="Send ticket" />
                    </li>
                </ul>
            </div>
        )
    }

    private send() {
        HttpService.post(PATH.sendTicket, this.state.ticketModel).then(data => {
            if (data.ErrorCode === 0) {
                this.setState({
                    sentSuccessfull: true
                });
            }
            else {
                // show an error popup
            }
        });
    }
}

当按下“发送票据”按钮时，它将调用HttpService.post方法以进行API调用，以将票据发送到系统。如您在导入部分中所见，HttpService托管在外部JS文件上。这是HttpService.post方法的代码。

public static async post(path, body) {

    return window.fetch(path, {
        body: JSON.stringify(body),
        cache: "no-cache",
        method: "post"
    })
        .then(data => {
            // call successfull
        })
        .catch(data => {
            if (data.status === 401) {
                // REDIRECT HERE
            }
            else {
                return data.json();
            }
        });
}

现在，如果API调用由于用户未通过身份验证而失败（返回HTTP状态401），则需要将用户重定向到“登录”页面。我会避免处理每个组件中的401 HTTP状态，因此我更喜欢直接在HttpService.post方法内部进行重定向。

Answer 1

尝试以下操作，让我知道它是否对您有用，请像这样更改服务器端：

public static async post(path, body) {

    return window.fetch(path, {
        body: JSON.stringify(body),
        cache: "no-cache",
        method: "post"
        })
        .then(data => {
            // call successfull
        })
        .catch(data => {
            // server side redirect below:
            if (data.status === 401) {
              data.redirect(url, 401)
            }
            else {
            return data.json();
            }
        });
}

然后客户端执行以下操作：

     private send() {
     const { history } = this.props 
        HttpService.post(PATH.sendTicket, this.state.ticketModel).then(data => {
            if (data.ErrorCode === 0) {
                this.setState({
                    sentSuccessfull: true
                });
            }
        }).catch(err => {
          hirstory.push('/your-route-here')
        })
      }

或者，如果您不使用react-router，则可以使用

而不是使用history.push

location.href = '/your-route-here'

具有某种效果的方法，但是使用location.href方法将清除您的应用程序状态，就像刷新页面一样有效。

让我知道这是否有帮助

劳埃德

如何从ReactJS中的外部函数重定向到路由

1 个答案: