Angular 角度-如何；退出“；组件？

假设我有一个需要身份验证的组件（事实上，该组件的某些实例需要身份验证，其他实例不依赖于“id”路由实例变量）：

---

问题是我的代码的其余部分总是被执行的（如果这个组件不安全或者用户登录了，这是可以的）。但是当“if”条件为true时（当导航到登录页面时），ngOninit（）方法中的其余代码仍会执行。

问题在于验证用户会话或身份验证的模式。Angular提出的理想模式是，如果不满足访问条件，则不组装组件

例如：

class UserToken {}
class Permissions {
  canActivate(user: UserToken, id: string): boolean {
    return true;
  }
}

@Injectable()
class CanActivateTeam implements CanActivate {
  constructor(private permissions: Permissions, private currentUser: UserToken) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean>|Promise<boolean>|boolean {
    return this.permissions.canActivate(this.currentUser, route.params.id);
  }
}

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'team/:id',
        component: TeamCmp,
        canActivate: [CanActivateTeam]
      }
    ])
  ],
  providers: [CanActivateTeam, UserToken, Permissions]
})
class AppModule {}

class UserToken{}
类权限{
canActivate（用户：UserToken，id:string）：布尔值{
返回true；
}
}
@可注射（）
类CanActivateTeam实现CanActivate{
构造函数（私有权限：权限，私有currentUser:UserToken）{}
激活(
路由：ActivatedRouteSnapshot，
状态：RouterStateSnapshot
)：可观察的|承诺|布尔值{
返回this.permissions.canActivate（this.currentUser，route.params.id）；
}
}
@NGD模块({
进口：[
RouterModule.forRoot([
{
路径：'team/：id'，
组成部分：TeamCmp，
canActivate:[CanActivateTeam]
}
])
],
提供者：[CanActivateTeam、UserToken、权限]
})
类AppModule{}

• 更多信息：
• 下面是一个更优雅的例子：

---

问题是：对于id route参数，我使用它从REST API加载数据，以便知道特定id是否需要某种身份验证。因此，需要执行该组件中的一些代码。但是我已经有一段时间没有使用guard了，所以它可能仍然可以工作，但是您可以将此参数传递给“CanActivate”服务，它将负责验证它是否加载组件。虽然此代码片段可以解决问题，但确实有助于提高帖子的质量。请记住，您将在将来回答读者的问题，这些人可能不知道您的代码建议的原因。

class UserToken {}
class Permissions {
  canActivate(user: UserToken, id: string): boolean {
    return true;
  }
}

@Injectable()
class CanActivateTeam implements CanActivate {
  constructor(private permissions: Permissions, private currentUser: UserToken) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean>|Promise<boolean>|boolean {
    return this.permissions.canActivate(this.currentUser, route.params.id);
  }
}

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'team/:id',
        component: TeamCmp,
        canActivate: [CanActivateTeam]
      }
    ])
  ],
  providers: [CanActivateTeam, UserToken, Permissions]
})
class AppModule {}

if(this.isSecured && this.authService.isLoggedIn()) {
  // sensitive stuff
} else {
this.router.navigate(['/login']);
}