Question

在当前的Angular 7和Firebase设置中，我遇到以下情况：

我有一个主要的应用程序组件，如果用户登录则显示成员区域，否则显示公共区域。一切工作正常，但是要延迟1-2秒，直到注销或登录后正确的组件显示出来。我不想使用路由btw。因为我想用相同的网址显示所有内容。

您是否知道如何减少延迟？无论如何，这是进行身份验证的良好做法吗？感谢您的帮助！

app.component.html

<div *ngIf="authService.isAuthorized(); else showLogin">
  <app-member></app-member>
</div>
<ng-template #showLogin>
  <app-public></app-public>
</ng-template>
<router-outlet></router-outlet>

然后是会员区和公共区的组件：

member.component.html：

<button nz-button [nzSize]="size" nzType="primary (click)="authService.logout()">Logout</button>

public.component.html：

<button nz-button [nzSize]="size" nzType="primary" (click)="authService.login()">Login</button>

Answer 1

我不知道如何不进行路由。您为什么不想使用它？就这么简单：在您的app-routing.module.ts文件上使用Angular的canActivate类。

为此，您将需要实施身份验证服务，以检查用户是否已登录。

示例：

   const routes: Routes = [
      {
        path: '',
        component: MemberComponent,
        canActivate: [YourAuthGuard],
      },
      {
        path: 'public',
        component: PublicComponent
      }
    ];
    @NgModule({
      imports: [...],
      exports: [...],
      providers: [ YourAuthGuard ]
    })
    export class AppRoutingModule { }

然后，您可以使用Angular类Router的navigation（）方法将重定向从一个组件转移到另一个组件。

希望这可以为您提供帮助。

Answer 2

使用您的初始方法，我建议您使用可观察的变量来定义是否对用户进行授权，这比调用函数authService.isAuthorized（）更好。您可以在authservice中定义一个可观察的属性：

AuthService.ts

isAuthorized() {
    ...
    this.isAuthorized.next(true);
}
isAuthorized$ = this.isAuthorized.asObservable();

通过这种方式，通过执行以下操作，该属性将在您的主模板中自动更新：

app.component.ts

authService.isAuthorized$.subscribe((response) => {
    this.isAuthorized = response;
});

然后您可以在主模板上使用

app.component.html

<div *ngIf="isAuthorized" ; else showLogin">

要处理可能的等待，如AJT_82所评论的那样，最好放一个微调器，直到发出呼叫为止。

无需路由的Angular 7组件重定向

2 个答案: