typescript - 如何在应用程序首先加载而不是 Angular 5 中的 appComponent 时显示登录组件

Question

我是 Angular 5 的新手，我想在应用程序打开时显示登录页面。

现在我正在展示 appComponent，它有工具栏和侧面导航栏。但是当用户加载应用程序时，如果登录成功，我想显示一个登录屏幕，那么只有用户应该允许看到主页。

如果我将我的 appcomponent 作为登录组件，我无法根据用户的菜单选择在主页中加载不同的组件。

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'},
];

目前，当 url 为 ' ' 并且变脏时，我重定向到 app-root 而不是我想重定向到 login 。

谁能帮我解决这个问题。

Answer 1

对于您的情况，使用 guard 将是更有效的解决方案。因为您想要实现的是阻止对您的 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 函数中实现您的身份验证检查逻辑。