{ "id": "api/router/CanActivate", "title": "CanActivate", "contents": "\n\n
\n
\n
\n \n API > @angular/router\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

CanActivatelink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

Interface that a class can implement to be a guard deciding if a route can be activated.\nIf all guards return true, navigation continues. If any guard returns false,\nnavigation is cancelled. If any guard returns a UrlTree, the current navigation\nis cancelled and a new navigation begins to the UrlTree returned from the guard.

\n\n

See more...

\n
\n \n \n
\n\ninterface CanActivate {\n canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree\n}\n\n\n \n \n\n\n \n \n\n
\n\n \n\n \n \n
\n

Descriptionlink

\n

The following example implements a CanActivate function that checks whether the\ncurrent user has permission to activate the requested route.

\n\nclass UserToken {}\nclass Permissions {\n canActivate(user: UserToken, id: string): boolean {\n return true;\n }\n}\n\n@Injectable()\nclass CanActivateTeam implements CanActivate {\n constructor(private permissions: Permissions, private currentUser: UserToken) {}\n\n canActivate(\n route: ActivatedRouteSnapshot,\n state: RouterStateSnapshot\n ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree {\n return this.permissions.canActivate(this.currentUser, route.params.id);\n }\n}\n\n

Here, the defined guard function is provided as part of the Route object\nin the router configuration:

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

You can alternatively provide an in-line function with the canActivate signature:

\n\n@NgModule({\n imports: [\n RouterModule.forRoot([\n {\n path: 'team/:id',\n component: TeamComponent,\n canActivate: ['canActivateTeam']\n }\n ])\n ],\n providers: [\n {\n provide: 'canActivateTeam',\n useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => true\n }\n ]\n})\nclass AppModule {}\n\n\n \n
\n\n \n\n \n\n
\n

Methodslink

\n \n \n\n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n canActivate()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n
\n \n\n canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n route\n ActivatedRouteSnapshot\n \n \n
\n \n state\n RouterStateSnapshot\n \n \n
\n\n \n
Returns
\n

Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree

\n\n \n\n\n \n\n \n
\n
\n\n \n
\n\n\n \n\n\n
\n
\n\n\n" }