@angular/router#CanLoad TypeScript Examples

/**
 * Guard makes redirect from about route to rubic landing.
 */
@Injectable({
  providedIn: 'root'
})
export class LandingRedirectGuard implements CanActivate, CanLoad {
  private readonly redirectUrl = EXTERNAL_LINKS.LANDING;

  constructor(@Inject(WINDOW) private readonly window: RubicWindow) {}

  canActivate(): ActivationResult {
    this.window.location.assign(this.redirectUrl);
    return false;
  }

  canLoad(): LoadResult {
    this.window.location.assign(this.redirectUrl);
    return false;
  }
}

@Injectable({
	providedIn: 'root'
})
export class AuthGuard implements CanActivate, CanActivateChild, CanLoad {
	constructor(
		private restService: RestService
	) {}

	canActivate(): Observable<boolean> {
		return this.isAuth();
	}
	canActivateChild(): Observable<boolean> {
		return this.isAuth();
	}

	canLoad(): Observable<boolean> {
		return this.isAuth();
	}

	private isAuth(): Observable<boolean> {
		return this.restService.awaitAuth();
	}
}

@Injectable({
  providedIn: 'root',
})
export class AuthorizationGuard
  implements CanActivate, CanActivateChild, CanLoad {
  constructor(
    private authService: AuthorizationService,
    private router: Router
  ) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): canActivateReturn {
    const url: string = state.url;
    return this.checkLogin(url);
  }

  checkLogin(url: string): canActivateReturn {
    if (this.authService.isUserAuthenticated()) {
      return true;
    }
    this.authService.redirectUrl = url;
    this.router.navigate(['/login']);
    return false;
  }

  canActivateChild(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): canActivateReturn {
    return this.canActivate(route, state);
  }

  canLoad(route: Route): canActivateReturn {
    const url = `/${route.path}`;
    return this.checkLogin(url);
  }
}

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate, CanLoad, CanActivateChild {
  constructor(private auth: AuthService) {}

  canLoad(route: Route, segments: UrlSegment[]): Observable<boolean> {
    return this.auth.isAuthenticated$.pipe(take(1));
  }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> {
    return this.redirectIfUnauthenticated(state);
  }

  canActivateChild(
    childRoute: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> {
    return this.redirectIfUnauthenticated(state);
  }

  private redirectIfUnauthenticated(
    state: RouterStateSnapshot
  ): Observable<boolean> {
    return this.auth.isAuthenticated$.pipe(
      tap((loggedIn) => {
        if (!loggedIn) {
          this.auth.loginWithRedirect({
            appState: { target: state.url },
          });
        }
      })
    );
  }
}

@Injectable({
  providedIn: "root",
})
export class AppGuard implements CanActivate, CanLoad {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(): Observable<boolean> {
    return this.canLoad();
  }

  canLoad(): Observable<boolean> {
    return this.authService.isLoggedIn$().pipe(
      tap((isLoggedIn) => {
        if (!isLoggedIn) {
          this.router.navigate(["/login"]);
        }
      })
    );
  }
}

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate, CanActivateChild, CanLoad {
  constructor(private authService: AuthService, private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const url: string = state.url;

    return this.checkLogin(url);
  }

  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    return this.canActivate(route, state);
  }

  canLoad(route: Route): boolean {
    // Store the entry url i.e. /admin-- > @Idrice am i not right?
    const url = `/${route.path}`;

    return this.checkLogin(url);
  }

  checkLogin(url: string): boolean {
    if (this.authService.isLoggedIn()) {
      return true;
    }

    this.authService.redirectUrl = url;
    this.router.navigate(['/login'], { queryParams: { returnUrl: url } });
    // Store the attempted URL for redirecting
    this.authService.redirectUrl = url;
    return false;


  }
}

@Injectable({
  providedIn: 'root'
})
export class CheckTutorial implements CanLoad {
  constructor(private storage: Storage, private router: Router) {}

  canLoad() {
    return this.storage.get('ion_did_tutorial').then(res => {
      if (res) {
        this.router.navigate(['/app', 'tabs', 'schedule']);
        return false;
      } else {
        return true;
      }
    });
  }
}

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate, CanLoad {
  constructor(
    private authService: AuthService,
    private socket: Socket,
    private globalData: GlobalData,
  ) { }

  private handle(): boolean | Observable<boolean> {
    if (this.globalData.user) { return true; }

    return this.authService.info().pipe(
      catchError(() => of(false)),
      map(({ data }: Result<User>) => {
        if (data) {
          this.globalData.user = data;
          this.socket.connect();
        }
        return true;
      })
    );
  }

  canLoad(route: Route, segments: UrlSegment[]): boolean | Promise<boolean> | Observable<boolean> {
    return this.handle();
  }

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return this.handle();
  }

}

@Injectable({
  providedIn: 'root'
})
export class NotAuthGuard implements CanActivate, CanLoad {
  constructor(
    private globalData: GlobalData,
    private router: Router
  ) { }

  private handle(): boolean | Observable<boolean> {
    const { user } = this.globalData;

    user && this.router.navigateByUrl('/');

    return !user;
  }

  canLoad(route: Route, segments: UrlSegment[]): boolean | Promise<boolean> | Observable<boolean> {
    return this.handle();
  }

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return this.handle();
  }

}

@Injectable()
export class AuthGuardService implements CanActivate, CanLoad {
  constructor(public router: Router, private authService: AuthService) {}

  canActivate(route: ActivatedRouteSnapshot): boolean | Observable<boolean> {
    return this.checkAuthentication(route.data && route.data['roles']);
  }

  canLoad(route: Route): boolean | Observable<boolean> {
    return this.checkAuthentication(route.data && route.data['roles']);
  }

  checkAuthentication(roles?: string[]): boolean | Observable<boolean> {
    if (roles) {
      return this.authService.hasRolesAsync(roles);
    }

    return this.authService.isLoggedInAsync;
  }
}

@Injectable({
  providedIn: 'root',
})
export class FeatureToggleGuard implements CanActivate, CanLoad {
  constructor(
    private featureToggleService: LgFeatureToggleService,
    private router: Router,
  ) {}

  canLoad(route: Route) {
    return this.isActive(route);
  }

  canActivate(route: ActivatedRouteSnapshot) {
    return this.isActive(route);
  }

  canActivateChild(childRoute: ActivatedRouteSnapshot) {
    return this.isActive(childRoute);
  }

  isActive(route: Route | ActivatedRouteSnapshot) {
    return this.featureToggleService.toggles$.pipe(
      first(),
      map(configToggles => {
        const active = getDataPropertyValues(route, 'featureToggle')
          .map(t => {
            const value = configToggles[t];

            return value === undefined || value;
          })
          .reduce((acc, current) => acc && current, true);

        if (!active) {
          this.router.navigate([ '/' ], { queryParamsHandling: 'merge' });
        }

        return active;
      }),
    );
  }
}