Functional Permission Guards with Redirect Logic

Snippet

Functional Permission Guards with Redirect Logic

Modern Angular applications use functional guards instead of class-based ones. This snippet demonstrates how to leverage 'inject' to access services within a function and return a 'UrlTree' for seamless redirection when permissions are missing.

snippet.js
javascript
import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { AuthService } from './auth.service';
 
export const roleGuard: CanActivateFn = (route) => {
  const authService = inject(AuthService);
  const router = inject(Router);
  const expectedRole = route.data['role'];
 
  return authService.hasRole(expectedRole) 
    || router.createUrlTree(['/unauthorized']);
};

angular

Breakdown

CanActivateFn

The functional interface type for modern Angular route guards.

inject(AuthService)

Uses functional Dependency Injection to retrieve instances without a constructor.

router.createUrlTree(...)

Returns a navigation instruction that Angular's router uses to redirect the user if the guard fails.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Functional Permission Guards with Redirect Logic

Related