Navigating deprecated CanActivate in Angular-15 with Auth Guard

Question

Navigating deprecated CanActivate in Angular-15 with Auth Guard

Authentication Guard:

import { Injectable, inject } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, CanActivateFn, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private route:Router){}
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    if(localStorage.getItem('userdata')){
      return true;
    }else{
      this.route.navigate(['login'])
      return false;
    }
  }
}

I encountered an error stating that

'CanActivate' is deprecated.ts(6385)
index.d.ts(302, 4): The declaration was marked as deprecated here.

How can I resolve this issue? I aim to restrict access to a dashboard without a successful login and redirect users back to the login page.

javascript angular typescript authentication login-page

Answer 1

Answer №1

Angular offers a standalone API called CanActivateFn instead of the traditional method:

For more information, refer to this guide: https://angular.io/api/router/CanActivateFn

Here is a sample scenario:

export const authGuard: CanActivateFn = (
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot,
): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree => {
  const router = inject(Router);
  if (localStorage.getItem('userdata')) {
    return true;
  } else {
    return router.navigate(['login']);
    /** no need to return 'false', just return the promise */
  }
};

Alternatively:

export const authGuard: CanActivateFn = () => {
  return !!localStorage.getItem('userdata') || inject(Router).navigate(['login']);
};

For example:

@Injectable()
class UserToken {
}

@Injectable()
class PermissionsService {
  canActivate(currentUser: UserToken, userId: string): boolean {
    return true;
  }
  canMatch(currentUser: UserToken): boolean {
    return true;
  }
}

const canActivateTeam: CanActivateFn =
    (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
      return inject(PermissionsService).canActivate(inject(UserToken), route.params['id']);
};

Define a route as follows:

{
      path: 'team/:id',
      component: TeamComponent,
      canActivate: [canActivateTeam],
}

Answer 2

Angular offers a standalone API called CanActivateFn instead of the traditional method:

For more information, refer to this guide: https://angular.io/api/router/CanActivateFn

Here is a sample scenario:

export const authGuard: CanActivateFn = (
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot,
): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree => {
  const router = inject(Router);
  if (localStorage.getItem('userdata')) {
    return true;
  } else {
    return router.navigate(['login']);
    /** no need to return 'false', just return the promise */
  }
};

Alternatively:

export const authGuard: CanActivateFn = () => {
  return !!localStorage.getItem('userdata') || inject(Router).navigate(['login']);
};

For example:

@Injectable()
class UserToken {
}

@Injectable()
class PermissionsService {
  canActivate(currentUser: UserToken, userId: string): boolean {
    return true;
  }
  canMatch(currentUser: UserToken): boolean {
    return true;
  }
}

const canActivateTeam: CanActivateFn =
    (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
      return inject(PermissionsService).canActivate(inject(UserToken), route.params['id']);
};

Define a route as follows:

{
      path: 'team/:id',
      component: TeamComponent,
      canActivate: [canActivateTeam],
}

Answer 3

Answer №2

If you're looking to restrict access, you can utilize the canActivateFn function!

import { inject } from '@angular/core';
import { Router, CanActivateFn } from '@angular/router';

const AuthGuard: CanActivateFn = () => {
     const route = inject(Router);
     if(localStorage.getItem('userdata')){
         return true;
     }else{
         route.navigate(['login'])
         return false;
     }
};

Answer 4

If you're looking to restrict access, you can utilize the canActivateFn function!

import { inject } from '@angular/core';
import { Router, CanActivateFn } from '@angular/router';

const AuthGuard: CanActivateFn = () => {
     const route = inject(Router);
     if(localStorage.getItem('userdata')){
         return true;
     }else{
         route.navigate(['login'])
         return false;
     }
};

Navigating deprecated CanActivate in Angular-15 with Auth Guard

Answer №1

Answer №2

Similar questions

Passing a single item from a list as a prop in Vue.js

adjust back side height of flip box does not function on IE web browser

Submitting forms using Ajax within a modal pop-up box

What is the process for importing a function dynamically in a Next.js TypeScript environment?

When you try to click outside of react-select, the dropdown doesn't

One question I have is how I can successfully send a value within the RxJS subscribe function

Importing named exports dynamically in Next.js

Narrow down your search results with date range filtering in Angular Material

Is there a way to make the fixed table header scroll along with the table body data?

I'm fascinated by the way well-known websites like The Guardian are utilizing Angular, as I often notice that when I click on links, the entire page reloads

Sustain information across two pages using Next.js

Changing the element tag and flipping escape characters in html entities

Most effective method to verify if mutation observer meets specific criteria

How can I switch out an item within FabricJS?

Connect the front end files, including HTML, CSS, and JavaScript, to the Node.js backend

Injecting dynamic content using JavaScript

Display content from Angular 5 template directly in table without using parent template

Having difficulty utilizing defineProps in TypeScript

Values are being set back to '1' within the popup dialog

Retrieve the value from another select element