В React, как мне кодировать разделенные публичные страницы (например, логин), чтобы отделить их от защищенных страниц?

Question

У меня есть приложение реагирования, которое имеет общедоступные страницы (логин, забытый пароль и т. Д.) И защищенные страницы (после того, как пользователь вошел в систему). Я хочу использовать разделение кода, чтобы пользователь, который не входит в систему, но заходит на общедоступную страницу, получает код только для общедоступных страниц, а не для защищенных страниц.

Это позволяет уменьшить размерПакет, который пользователь должен загрузить изначально, и гарантировать, что пользователь, который никогда не пройдет страницу входа, не сможет увидеть код, связанный с защищенной страницей.

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

Есть ли способ сгруппировать код вместе? Или группировать маршруты вместе?

Answer 1

в этом случае вам нужно будет создать два приложения по-разному.

в противном случае сборка приложения на одной странице доставит все файлы при любой загрузке URL-адреса независимо от того, какую страницу пользователь посещает.

дажеесли вы группируете свой код, это не имеет значения, так как в любом случае отправленные в комплекте js будут отправлены.

было бы лучше разделить вашу единственную страницу на субприложение. тогда вам просто нужно будет обрабатывать и обслуживать соответствующим образом.

, а другой вариант - рендеринг на стороне сервера, если он вас устраивает. ссылка

Answer 2

Разве вы не можете обернуть свои защищенные компоненты в компонент контейнера и визуализировать контейнер на основе пути, а затем внутри загрузить сегменты кода и отредактировать защищенные компоненты по мере необходимости?

<Switch>
   <Route path='/login' to{<Login />} />
   <Route path='/secure' to={<Secure />} />
</Switch>

Затем внутрикомпонента, загрузите защищенную кодовую базу и используйте <Switch /> внутри <Secure /> для маршрутизации на каждую защищенную страницу.