Angular

Question

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

ngOninit() {
const id = +this.activatedRoute.snapshot.params.id;
this.isSecured = requiresAuthentication(id);

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

//very private data loading code

问题是我的其余代码总是被执行（如果此组件不安全或用户已登录，这很好）。但是当 "if" 条件为真时（导航到登录页面时），我在 ngOninit() 方法中的其余代码仍然执行。

Answer 1

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

例如：

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 {}

更多信息：https://angular.io/api/router/CanActivate
这里有一个更优雅的例子：https://angular-2-training-book.rangle.io/handout/routing/route_guards.html

Answer 2

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

Angular - 如何"exit"一个组件？

Angular - how to "exit" a component?

angular-routing