Загружать разные маршруты на бета-сервере, чем на главном сервере?

Question

Я использую реагировать и реагировать на мой веб-сайт. У меня есть две версии сайта: одна для бета-пользователей, а другая для моих клиентов. Когда сайт загружается на бета-сервер с process.env.IS_BETA === "true", я хочу, чтобы только пользователи имели возможность получить доступ к логину и забыли мои страницы с паролями. Я не хочу, чтобы они получали доступ к странице регистрации или главной странице. Я попробовал следующее, но это не сработало, потому что я думаю, что process.env уже прочитано при сборке.

export const App = () => (
    <BrowserRouter>
        <div className="d-flex flex-column height-100vh">
            <Navbar />
                {process.env.IS_BETA === "true" && (
                    <Switch>
                        <Route path="/PrivacyPolicy" component={PrivacyPolicy} />
                        <Route path="/TermsOfUse" component={TermsOfUse} />

                        <Route path="/Login" component={Login} />
                        <Route path="/Forgot" component={Forgot} />
                        <Route path="/Reset" component={Reset} />

                        <Redirect to="/Login" />
                    </Switch>
                )}
                {process.env.IS_BETA !== "true" && (
                    <Switch>
                        <Route exact path="/" component={Home} />
                        <Route path="/PrivacyPolicy" component={PrivacyPolicy} />
                        <Route path="/TermsOfUse" component={TermsOfUse} />

                        <Route path="/Register" component={Register} />
                        <Route path="/Login" component={Login} />
                        <Route path="/Forgot" component={Forgot} />
                        <Route path="/Reset" component={Reset} />

                        <Redirect to="/" />
                    </Switch>
                )}
            <Footer />
        </div>
    </BrowserRouter>
);

Как перенаправить или не загружать некоторые страницы на бета-сервере?

Answer 1

process.env недоступно в вашем коде Javascript, но будет доступно для Webpack во время компиляции.Webpack поддерживает определение глобальных переменных в вашей среде Javascript с помощью DefinePlugin , поэтому, добавив новое определение плагина следующим образом:

plugins: [
    new webpack.DefinePlugin({
        __IS_BETA__: process.env.IS_BETA === "true",
    }),
],

в конфигурации Webpack, __IS_BETA__ будет заменено на протяжении всего вашегоКод Javascript, основанный на том, была ли переменная среды IS_BETA установлена ​​в true при компиляции приложения.

Затем вы можете ссылаться на нее в своем коде React следующим образом:

export const App = () => (
    <BrowserRouter>
        <div className="d-flex flex-column height-100vh">
            <Navbar />
                {__IS_BETA__ && (
                    <Switch>
                        <Route path="/PrivacyPolicy" component={PrivacyPolicy} />
                        <Route path="/TermsOfUse" component={TermsOfUse} />

                        <Route path="/Login" component={Login} />
                        <Route path="/Forgot" component={Forgot} />
                        <Route path="/Reset" component={Reset} />

                        <Redirect to="/Login" />
                    </Switch>
                )}
                {!__IS_BETA__ && (
                    <Switch>
                        <Route exact path="/" component={Home} />
                        <Route path="/PrivacyPolicy" component={PrivacyPolicy} />
                        <Route path="/TermsOfUse" component={TermsOfUse} />

                        <Route path="/Register" component={Register} />
                        <Route path="/Login" component={Login} />
                        <Route path="/Forgot" component={Forgot} />
                        <Route path="/Reset" component={Reset} />

                        <Redirect to="/" />
                    </Switch>
                )}
            <Footer />
        </div>
    </BrowserRouter>
);