Question

来自https://angular.io/api/router/CanActivate#description的示例我正在努力解决几件事：

1。类Permissions和CanActivateTeam包含一个名为canActivate的函数。这种良好做法如何？这让我感到困惑，尤其是因为我们在this（permissions函数内部调用了canActivate。canActivate。)！

2。 canActivate始终返回true。我不明白为什么？

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|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree {
    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 {}

Answer 1

Permissions类具有canActivate方法，但这是一个巧合。他们可以将其称为foo：之所以这样称呼它，是因为它很清楚地用途（一旦您知道canActivate在Angular中的含义。同样，如果您看到{{ 1}}中的某个类，则很有可能在拦截器中使用了该类。

对于intercept类，它具有CanActivateTeam函数，因为它实现了canActivate接口。这是Angular创建的一个好习惯：您应该始终实现与框架的某些挂钩相对应的接口。这对诸如CanActivate，HttpInterceptor，OnInit等事物有效。

强烈建议使用那些接口，虽然不是必需的。

这只是实现示例，仅此而已。他们只是给出一般语法，不要指望API文档对示例有足够的了解。它在那里描述一个类的角色，及其变量，方法，它们的类型和签名。

简而言之，AfterViewInit应该返回一个布尔值，或者布尔值的promise / observable。

如果布尔值是真实的，则可以访问受保护的路由。如果不是，导航将被取消，您必须向用户显示一条消息，指出他无法访问应用程序的此部分。

Answer 2

CanActivateTeam是CanActivate Angular Route保护机制的实现。

它用于防止用户访问路由（canActivate）或一组路由（canActivateChild）。它也可以用于在访问路由之前解析数据（从Web服务加载/检查身份验证）

实现CanActivate接口时，必须提供canActivate函数，该函数必须返回布尔值，Promise或Observable。在您给出的示例中，调用了处理该逻辑的外部服务。这种做法是好的，因为将多个角落分开总是一件好事（路由保护是一回事，许可服务是另一回事）

然后使用CanActivateTeam::canActivate方法PermissionService::canActivate来了解用户是否可以访问此路由。

在PermissionService::canActivate中，由您自己来编写自己的逻辑（调用WS，检查cookie等），我想他们放了一个简单的return true来使简单的例子不复杂

canActivate文档示例-基本理解

2 个答案: