Как реагировать, каков наилучший способ выполнить вызов API и перенаправить перед Render ()?

Question

В основном я работаю с бэкэндом, так что мой 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 для доступа пользователя, компонент загружается, но если нет, страница застревает в * 1008.* фаза и никогда Redirect с.

Весь мой javascript самоучка. Если то, что я делаю, является плохой практикой для выполнения подобных вещей, пожалуйста, дайте мне знать, как правильно это делать, или покажите мне, почему это не работает, такЯ получаю это работает.

Answer 1

Вы используете 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
        });
    })
}

Answer 2

Вы можете настроить свой код, как показано ниже, чтобы он работал

....
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>
            )
        }
    }
}