反応として、Render（）の前にAPI呼び出しを実行してリダイレクトするための最良の方法は何ですか？

私は主にバックエンドを行っているので、JavaScriptだけではありませんが、設計している管理パネルに問題があります。サイトの一部には、特定のユーザーのみがアクセスできます。

保護されたコンポーネントがロードするたびに、私はリターンが200または403は、200応答が呼ばれるキーが含まどちらか戻って私のRESTサーバにリクエストを送信し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>フェーズでスタックし、決してRedirectsになりません。

私のJavaScriptはすべて独学です。私がやっていることは、この種のことを実行するのに悪い習慣である場合は、それを適切に行う方法を教えてください。または、なぜこれが機能しないのかを教えてください。