Angular2 canActivate() calling async function

by

canActivate needs to return an Observable that completes:

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private auth: AngularFireAuth, private router: Router) {}

    canActivate(route:ActivatedRouteSnapshot, state:RouterStateSnapshot):Observable<boolean>|boolean {
        return this.auth.map((auth) => {
            if (auth) {
                console.log('authenticated');
                return true;
            }
            console.log('not authenticated');
            this.router.navigateByUrl('/login');
            return false;
        }).first(); // this might not be necessary - ensure `first` is imported if you use it
    }
}

There is a return missing and I use map() instead of subscribe() because subscribe() returns a Subscription not an Observable

More Related Contents:

  1. Get route query params
  2. *ngFor running an infinite loop in angular2
  3. Angular 2 custom form input
  4. How to inject Document in service?
  5. Angular 2 router event listener
  6. Angular 2 Show and Hide an element
  7. Angular 2: Convert Observable to Promise
  8. Angular 2 Scroll to top on Route Change
  9. In Angular, how do you determine the active route?
  10. Angular2: How to load data before rendering the component?
  11. Angular2 – should private variables be accessible in the template?
  12. How to prepare release version with SystemJS and Gulp?
  13. How to display json object using *ngFor
  14. Angular 2 – How do I navigate to another route using this.router.parent.navigate(‘/about’)?
  15. Angular redirect to login page
  16. How to avoid imports with very long relative paths in Angular 2?
  17. Angular no provider for NameService
  18. Angular2 router keep query string
  19. Angular2 – Share data between components using services
  20. Accessing a property in a parent Component
  21. Multiple canActivate guards all run when first fails
  22. TypeScript error in Angular2 code: Cannot find name ‘module’
  23. Visual Studio Code Automatic Imports
  24. Pass parameter into route guard
  25. RxJs get value from observable
  26. How to create an Observable from static data similar to http one in Angular?
  27. Angular2 – root relative imports
  28. RxJs Array of Observable to Observable of Array
  29. Angular2 HTTP GET – Cast response into full object
  30. How to deal with http status codes other than 200 in Angular 2

Leave a Comment