{"id":2816,"date":"2023-08-09T16:30:59","date_gmt":"2023-08-09T14:30:59","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=2816"},"modified":"2023-08-09T19:27:13","modified_gmt":"2023-08-09T17:27:13","slug":"how-to-resolve-canactivate-deprecated-in-angular-15-auth-guard","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2023\/08\/09\/how-to-resolve-canactivate-deprecated-in-angular-15-auth-guard\/","title":{"rendered":"How to resolve CanActivate deprecated in Angular-15 Auth Guard ?"},"content":{"rendered":"\n

The canActivate method implementation via the implements CanActivate class in the child class is deprecated since Angular v.15. <\/p>\n\n\n\n

Instead, we have to call this function directly from our routing module file where the declaration of the component happens.<\/p>\n\n\n\n

Solution I<\/h4>\n\n\n\n
\/\/ Routing Module File.ts\n\n\n\/\/ Example 1 ~ Without parameters\n\n{\n    path: 'Dashboard',\n    canActivate: [() => inject(AuthGuard).canActivate()], \/\/ AuthGuard is your same class as it was before\n    component: DashboardComponent \n}\n\n\n\n\/\/ Example 2 ~ With parameters\n\n{\n    path: 'Dashboard',\n    canActivate: [(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) => inject(AuthGuard).canActivate(next, state)],\n    component: DashboardComponent<\/code><\/pre>\n\n\n\n
\n\n\n\n
<\/div>\n\n\n\n
Solution II  –  (Recommended by Angular Documentation)<\/a><\/h4>\n\n\n\n
(based on: https:\/\/angular.io\/guide\/router#preventing-unauthorized-access)<\/a><\/p>\n\n\n\n
old :<\/p>\n\n\n\n
@Injectable({\n  providedIn: 'root'\n})\nexport class AuthGuard implements CanActivate {\n\n  constructor(private router: Router) {}\n\n  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean \n  {\n    \/\/your logic goes here\n  }\n}<\/code><\/pre>\n\n\n\n
base on: https:\/\/angular.io\/guide\/router#preventing-unauthorized-access<\/a><\/p>\n\n\n\n
old:<\/p>\n\n\n\n
@Injectable({\n  providedIn: 'root'\n})\nexport class AuthGuard implements CanActivate {\n\n  constructor(private router: Router) {}\n\n  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean \n  {\n    \/\/your logic goes here\n  }\n}\n<\/code><\/pre>\n\n\n\n
new:<\/strong><\/span><\/p>\n\n\n\n
@Injectable({\n  providedIn: 'root'\n})\nclass PermissionsService {\n\n  constructor(private router: Router) {}\n\n  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {\n      \/\/your logic goes here\n  }\n}\n\nexport const AuthGuard: CanActivateFn = (next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean => {\n  return inject(PermissionsService).canActivate(next, state);\n}<\/code><\/pre>\n\n\n\n
there is no need to change in our routes and we can use it same as old:<\/p>\n\n\n\n
{\n    path: 'Dashboard',\n    canActivate: [AuthGuard],\n    component: DashboardComponent\n  }<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
PS: <\/strong>We can also rename the AuthGuard function, then we will have to adapt the naming in our routes..<\/em> <\/p>\n\n\n\n
@Injectable({\r\n  providedIn: 'root'\r\n})\r\nclass PermissionsService {\r\n\r\n  constructor(private router: Router) {}\r\n\r\n  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {\r\n      \/\/your logic goes here\r\n  }\r\n}\n\nconst canActivateTeam: CanActivateFn =\r\n    (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {\r\n      return inject(PermissionsService).canActivate(inject(UserToken), route.params.id);\r\n    };<\/code><\/pre>\n\n\n\n
now, we adapt the routing modules:<\/p>\n\n\n\n
bootstrapApplication(App, {\r\n  providers: [provideRouter([\r\n    {\r\n      path: 'Dashboard',\r\n      component: DashboardComponent,\r\n      canActivate: [canActivateTeam],\r\n    },\r\n  ])]\r\n});<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
The canActivate method implementation via the implements CanActivate class in the child class is deprecated since Angular v.15. Instead, we have to call this function directly from our routing module file where the declaration of the component happens. Solution I Solution II – (Recommended by Angular Documentation) (based on: https:\/\/angular.io\/guide\/router#preventing-unauthorized-access) old : base on: https:\/\/angular.io\/guide\/router#preventing-unauthorized-access old: new: […]<\/p>\n","protected":false},"author":1,"featured_media":2038,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37],"tags":[719,722,720,721],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2816"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=2816"}],"version-history":[{"count":4,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2816\/revisions"}],"predecessor-version":[{"id":2821,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2816\/revisions\/2821"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/2038"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=2816"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=2816"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=2816"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}