Как показать компонент входа в систему, когда приложение загружается первым вместо appComponent в Angular 5 - PullRequest
Новая
       34

Как показать компонент входа в систему, когда приложение загружается первым вместо appComponent в Angular 5

0 голосов
/ 02 октября 2018

Я совершенно новичок в Angular 5, я хочу показать страницу входа в систему, когда приложение открыто.

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

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

app.component.html 

<mat-sidenav-container fullscreen>
    <mat-sidenav #sidenav class="app-sidenav">
        <mat-nav-list>
            <a mat-list-item routerLink="/home" routerLinkActive="active-list-item">
                <h2 matLine>Home</h2>
                <mat-icon matListIcon>home</mat-icon>
            </a>
            <a mat-list-item routerLink="/account" routerLinkActive="active-list-item">
                <h2 matLine>Account</h2>
                <mat-icon matListIcon>person</mat-icon>
            </a>
            <a mat-list-item routerLink="/settings" routerLinkActive="active-list-item">
                <h2 matLine>Settings</h2>
                <mat-icon matListIcon>settings</mat-icon>
            </a>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <mat-toolbar color="primary" class="mat-elevation-z3">
            <button mat-icon-button (click)="sidenav.toggle()">
        <mat-icon>menu</mat-icon>
      </button>
      My App
    </mat-toolbar>
    <div class="app-content">
      <router-outlet></router-outlet>  // router-outlet
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

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

const  routings: Routes = [
    {path:'',redirectTo:'/app-root',pathMatch:'full'},
    {path:'home',component:HomeComponent},
    {path:'account',component:AccountComponent},
    {path:'settings',component:SettingsComponent},
    {path:'**',redirectTo:'/app-root',pathMatch:'full'},
];

в настоящее время я перенаправляю в app-root, когда URL-адрес '' и грязный, вместо этого я хочу перенаправить для входа в систему.

может кто-нибудь помочь мне решить эту проблему.

1 Ответ

0 голосов
/ 02 октября 2018

Использование охраны будет более эффективным решением для вашего случая.Потому что то, чего вы хотите добиться, это блокировать любые анонимные вызовы вашего AppComponent.

Создайте охрану, которая будет проверять, аутентифицирован ли пользователь или нет.Примените охрану к вашему AppComponent.И в вашей безопасности, если пользователь не прошел аутентификацию, перенаправьте на ваш LoginComponent. 

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

@Injectable()
export class LoginGuard implements CanActivate {
    constructor(private router: Router) {}

    canActivate() {
        //authentication check logic
    }
}

Вы можете реализовать свою логику проверки аутентификации в функции canActivate.

...