作为回应,在Render()之前执行API调用和重定向的最佳方法是什么?

时间:2018-12-23 09:17:42

标签: javascript reactjs react-router-dom

我主要做后端,所以我的javascript并不是全部,但是我正在设计的管理面板中有问题。网站的某些部分只能由某些用户访问。

每次加载受保护的组件时,我都会向REST服务器发送一个请求,该服务器返回200或403,该200响应包含一个名为redirect的密钥,即False。所以我的想法是要做以下事情:

...
import { Redirect } from 'react-router-dom';
import axios from 'axios';


class MyProtectedComponent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            authCalled: false,
            redirect: true,
        };
    }

    componentDidMount() {
        console.log("mounting...")
        axios.get('<https://url>',
        {headers: {"Authorization": localStorage.getItem("token")}})
        .then(res => {
            this.setState({
                redirect: res.data.data.redirect,
                authCalled: true,
            });
        })
    }

    render() {
        if (this.state.authCalled === false) {
           return (
               <div className="animated fadeIn">
               <Row>
               <Col>
               authenticating...
               </Col>
               </Row>
               </div>
           )
       }

       if (this.state.redirect === true) {
           return <Redirect to={{pathname: "/nonauthpage"}} />;
       }

   return ( ....... <main code> ..... )

现在,如果服务器发回200条以允许用户访问,则将加载组件,但如果没有,则页面将停留在<authenticating>阶段,并且永远不会停留Redirect s。

我所有的javascript都是自学的,如果我做的事情对执行此类操作是不好的做法,请让我知道如何正确执行,或者告诉我为什么它不起作用,以便我理解工作。

2 个答案:

答案 0 :(得分:3)

您正在使用axios,这意味着如果响应不是200(或2XX),则不会执行then,而是需要像下面这样连锁执行.catch

componentDidMount() {
    console.log("mounting...")
    axios.get('<https://url>',
    {headers: {"Authorization": localStorage.getItem("token")}})
    .then(res => {
        this.setState({
            redirect: res.data.data.redirect,
            authCalled: true,
        });
    }).catch(error => {
        // You can do additional checks here like e.g. check if the response code is 403 or 401 
        this.setState({
             redirect: true,
             authCalled: true
        });
    })
}

答案 1 :(得分:1)

您可以按如下所示自定义代码以使其正常工作

....
import { Redirect } from 'react-router-dom';
import axios from 'axios';


class MyProtectedComponent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            authCalled: false,
            redirect: true,
        };
    }

    componentDidMount() {
        console.log("mounting...")
        axios.get('<https://url>',
        {headers: {"Authorization": localStorage.getItem("token")}})
        .then(res => {
            this.setState({
                redirect: res.data.data.redirect,
                authCalled: true,
            });
        }).catch(err => {
            this.setState({
                redirect: true,
                authCalled: true,
            });
        })
    }

    render() {
        if (this.state.authCalled === true) {
            if (this.state.redirect === true) { 
                return <Redirect to={{pathname: "/nonauthpage"}} />;
            } else {
                  return ( ....... <main code> ..... ) 
            }
        }
        else {
            return (
                <div className="animated fadeIn">
                    <Row>
                        <Col>
                        authenticating...
                        </Col>
                    </Row>
                </div>
            )
        }
    }
}