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
.
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Как конвертировать pkcs1 в pkcs8 и обратно? Либо на javascript, либо на python
Подскажите, как мне получить информацию о пикселях на отрисованном мной холсте с помощью функции getImageData()Я не загружаю картинку, рисую самостоятельно...
Как выводить один элемент в main, соответствующий той ссылке, которую кликаешь слева?
Хочу проверить верный ли счет в теннисеВ теннисе сет заканчивается, когда один из игроков выигрывает 6 игр, а другой выигрывает меньше 5 или,...