canActivate 文档示例 - 一般理解

Question

Example from https://angular.io/api/router/CanActivate#description There are several things I am struggling with:

1. the class Permissions AND CanActivateTeam contain a function called canActivate . How is this good practice? It confuses me, especially since we call this . permissions . canActivate inside the canActivate ( ) function!

2. canActivate always returns true. I don't understand why?

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

1. Permissions class has a canActivate method, but it is a coincidence. They could have called it foo : they called it like that because it is clear what it is used for (once you know what canActivate means in Angular. In the same way, if you see an intercept in a class, chances are that this class is being used in an interceptor.

For the CanActivateTeam class, it has a canActivate function because it implements the CanActivate interface. This is a good practice created by Angular : you should always implement the interfaces corresponding to certain hooks of the framework. This is valid for things such as HttpInterceptor , OnInit , AfterViewInit , etc.

Those interfaces, while not required, are strongly recommended.

2. This is an example of implementation, nothing more. They just give the general syntax, don't expect the API doc to be thorough on examples. It's there to describe the role of a class, and its variables, methods, their types and signatures.

Made it short and simple, canActivate should return a boolean, or a promise/observable of a boolean.

If the boolean is truthy, you can access your guarded routes. If not, the navigation is cancelled, and you have to display a message to the user, stating that he can not access this part of your application.

Answer 2

CanActivateTeam is an implementation of the CanActivate Angular Route guards mechanisms.

It is used to to prevent a user to access a route (canActivate) or a group of routes (canActivateChild). It can also be used to resolve data before accessing a route (loading/check auth from webservice)

When you implement the CanActivate interface, you have to provide the canActivate function that must return either a boolean, a Promise or an Observable. In the example you had given, an external service is called that is handling that logic. The practice is good as it is always good to separate concers (route guard is one thing, a permission service an other)

Then the CanActivateTeam::canActivate method PermissionService::canActivate to know if the user can access this route.

In the PermissionService::canActivate , it up to you to code your own logic (call a WS, check a cookie, etc), and I guess they put a simple return true to not complicate their simple example.