Delay canActivate call when page refreshes in order to wait for the data to load


When I reload my page, it always goes to blank page instead of the same page. The reason behind this is canActivate method which is cheking for user’s permission gets invoked as soon as user refreshes the page and it is not able to get user data immediately. User data comes after some seconds.
Is there any way to make canActivate method wait till data comses? I have been going through RxJS’s page but not understanding how to do it.
Can someone suggest me any ideas?

  constructor(private router: Router, private userDataService: UserDataService) {
      (data: User) => {
        this.userData = userData --> comes after some seconds

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):         
     Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree 
    const result = this.getUserData(route);
    if (!result) {
    return result;

public getUserData(): Observable<boolean> {
    if (this.userData) {
        check for permissions...
        return of(true);    
    return of(false);

Source: Angular Questions

Categorized as angular, angular-ui-router, canactivate, rxjs Tagged , , ,


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?

Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us