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

Posted 2023-03-13

【中文标题】如何在应用程序首先加载而不是Angular 5中的appComponent时显示登录组件

【英文标题】：How to show login Component when app loads first instead of appComponent in Angular 5

【发布时间】：2019-03-07 14:24:31

【问题描述】：

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

现在我正在显示 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 。

谁能帮我解决这个问题。

【问题讨论】：

嗨@Zhu 找到正确答案了吗？如果是这样，你能发表你的答案吗

hi @Zhu 你找到解决办法了吗？

【参考方案1】：

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

【讨论】：

我如何最初打开登录组件而不是 app.component @Serdar

据我了解 在 appcomponent 中，没有 如何显示全屏登录页面。如果我错了请纠正我@Serdar

在 app.module 中，您使用引导属性定义您的起始组件。您可以使用登录组件更改它。这会将您的应用程序起点更改为登录组件。但我仍然建议你需要为你的情况使用警卫。