Как правильно спроектировать структуру компонентов Angular?
Я установил Angular с помощью CLI со стандартной структурой. По умолчанию точка входа в приложение - app.module.
app.module -> app.component
В шаблоне app.component.html:
<router-outlet>
</ router-outlet>
Этот шаблон должен быть виден только после авторизации.
Проблема в том, что когда я запрашиваю страницу авторизации (страницу входа), она вставляется в этот частный шаблон. Что случилось? Страница входа должна работать как отдельная страница.
Как это организовать?
Проблема описана на рис:
У меня частный SPA, первая страница всегда страница входа. Это отдельная страница. Остальное - административная часть
Это довольно непонятно и не отвечает на мои вопросы. Чего вы пытаетесь достичь и почему нельзя скрыть шаблон компонента приложения, который не содержит ничего, кроме выхода маршрутизатора?
У меня есть общедоступная страница входа. Остальные являются частными и доступны после входа в систему. Я не получил твоего ответа
То, что вы хотите сохранить приватным и недоступным до входа в систему, не является вашим корневым компонентом. Это все компоненты страницы, кроме компонента страницы входа.
Думаю должно быть две разные страницы с двумя маршрутами-выходами
Да, по умолчанию главная страница - это страница входа.
Если вы можете предоставить, пожалуйста, структуру
Ответы 1
То, что вы хотите сохранить приватным до входа в систему, не является вашим корневым компонентом. Что вы хотите сохранить конфиденциальным, так это все компоненты страницы, кроме компонента входа в систему.
Таким образом, вам просто нужна конфигурация маршрута, подобная следующей:
[
{
path: 'login',
component: LoginComponent
},
{
path: '',
canActivate: [AuthenticatedGuard],
children: [
all your other pages here
]
}
]
И AuthenticatedGuard должен предотвратить активацию и перейти к маршруту входа в систему, если пользователь еще не прошел проверку подлинности.
По поводу второй части вашего вопроса. проблема в том, что ваш шаблон корневого компонента содержит гораздо больше, чем указано в первой части: он содержит левое меню в дополнение к выходу маршрутизатора. Удалите это из корневого компонента, поскольку вам не нужна эта боковая панель на всех страницах: на странице входа она не должна быть. Вместо этого поместите его в отдельный «подкорневой» компонент, который мы назовем основным компонентом. Этот компонент должен иметь в своем шаблоне левое меню и (второй) роутер-выход.
[
{
path: 'login',
component: LoginComponent
},
{
path: '',
canActivate: [AuthenticatedGuard],
component: MainComponent,
children: [
// all your page components here
]
}
]
Альтернативой было бы оставить его, как в первой части ответа, и просто добавить *ngIf в левое меню, чтобы проверить, аутентифицирован ли пользователь или нет.
Да, но проблема в route-outlet. Я предоставлю интересующую вас картинку.
Я добавил рис, проблема в том, что у меня есть шаблон HTML в app.component.html. Это частная часть. Когда я открываю страницу входа в систему, внутри приватной части отображается шаблон входа.
Итак, вы рекомендуете переместить скелет шаблона в MainComponent.html? А в AppComponent.html оставить маршрут-выход в качестве основного?
Не уверен, что вы имеете в виду, говоря «оставить маршрут-выход в AppComponent.html как основной». Компонент приложения, являющийся корневым компонентом, отображается независимо от маршрута. Таким образом, его шаблон должен содержать то, что является общим для страниц все, включая страницу входа. Поскольку меню не должно быть на странице входа, его не должно быть в шаблоне компонента приложения. Главный компонент - это родительский компонент для всех страниц, кроме страницы входа, поэтому там должно быть меню. И компонент приложения, и основной компонент должны иметь выход-маршрутизатор, поскольку у них обоих есть дочерние маршруты.
Я вас понял, я имел в виду, что app.component в моем случае должен содержать только маршрут-выход?
Почему шаблон вашего корневого компонента, не содержащий ничего конфиденциального, должен быть виден только после авторизации? Где бы что-нибудь отображалось, если нельзя отобразить шаблон корневого компонента?