How to make loading of template after ngOnInit. Angular 5

166
21 января 2019, 03:00

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.

Answer 1

В 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.

READ ALSO
Как конвертировать pkcs1 в pkcs8 и обратно?

Как конвертировать pkcs1 в pkcs8 и обратно?

Как конвертировать pkcs1 в pkcs8 и обратно? Либо на javascript, либо на python

177
Обработка пикселей с помощью canvas

Обработка пикселей с помощью canvas

Подскажите, как мне получить информацию о пикселях на отрисованном мной холсте с помощью функции getImageData()Я не загружаю картинку, рисую самостоятельно...

155
Как вывести Item из ItemList

Как вывести Item из ItemList

Как выводить один элемент в main, соответствующий той ссылке, которую кликаешь слева?

247
Оптимизация кода тенниса

Оптимизация кода тенниса

Хочу проверить верный ли счет в теннисеВ теннисе сет заканчивается, когда один из игроков выигрывает 6 игр, а другой выигрывает меньше 5 или,...

173