When I am logged in and go to the login I shortly see the login form and then the normal dashboard. The login form should not be visible at all for logged in users when they visit the main page. If they visit they should be "redirected" to the main page (without showing the login form).
As I understand I need to make loading template after ngOnInit, or make condition before template is loaded.
В Angular есть концепция защитников (guards), которые как раз таки решают вашу проблему. Они могут ограничить доступ к определенным роутам по определенным условиям, как и в данном случае, что хотите сделать вы - ограничить доступ к роуту /login, если пользователь авторизован. Защитник - это всего лишь обычная функция:
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private router: Router) {}
public canActivate(): boolean {
const user = JSON.parse(localStorage.getItem('currentUser'));
if (user) {
return this.router.navigateByUrl('/index') && false;
}
return true;
}
}
CanActivate - это интерфейс и синтаксический сахар (скажем нет утиной типизации), заставляет класс реализовывать метод canActivate.
Так как AuthGuard маркирован декоратором Injectable - мы делаем вывод, что это провайдер и он должен быть зарегистрирован в метаданных модуля, чтоб инжектор имел доступ к нашему сервису:
import { AuthGuard } from './путь-к-auth-guard.ts';
@NgModule({
imports: [...],
declarations: [...],
bootstrap: [...],
providers: [AuthGuard]
})
Для избежания до того, чтобы постоянно не импортить сервисы и не регистрировать их в providers - апгрейднитесь до 6 версии Angular, там есть поддержка tree-shakable провайдеров.
Теперь дело за малым, нужно сказать роутеру какой роут следует проверить на доступ, я не знаю вашей конфигурации роутера, покажу на примере:
// app.router.module.ts
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './путь-к-auth-guard.ts';
const routes: Routes = [{
path: 'index',
component: КомпонентIndex
}, {
path: 'login',
component: КомпонентLogin,
canActivate: [AuthGuard]
}];
export const AppRouterModule: ModuleWithProviders = RouterModule.forRoot(routes);
Теперь, когда пользователь попытается перейти по роуту /login - модуль роутера вызовет метод canActivate, который вернет boolean, если вернет true - значит можно активировать компонент, если false - то перекинет не index.
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости