Check if the user logged in on any page change in Angular 2

Question

Slowly but surely progressing with Angular2. And now I faced the following challenge. I want to check if the user logged in or not on every page change (in other words on load of each and every component). Of course, I can implement OnInit interface in each and every one of them, but that is code smell.

Is there any efficient way of executing anything that needed on every page of the app? I would love to hear any other suggestions about best practices of how to handle this task.

I am using this library (https://auth0.com/blog/2015/11/10/introducing-angular2-jwt-a-library-for-angular2-authentication/) for jwt based login and I already have a nice service class that encapsulates all authentication related functionality. So, the actual checking where or not the user is logged in is already done and tested.

Thanks,

Answer 1

If you use routing (and it seems to be the case since you say: "on every page change"), you can leverage several things:

• Create a custom router-outlet (a sub class of RouterOutlet) that checks authentication with its activate method is called. In this case, you can have something global. Something like that:

  @Directive({
    selector: 'auth-outlet'
  })
  export class AuthOutlet extends RouterOutlet {
    (...)
  
    activate(oldInstruction: ComponentInstruction) {
      var url = this.parentRouter.lastNavigationAttempt;
      if (isAuthenticated()) {
        return super.activate(oldInstruction);
      } else {
        (...)
      }
    }
  }
  

  See this question for more details:

  • Angular 2 Authentication with child routes

• Leverage the CanActivate decorator to check is a component can be activated or not. In your case, you can execute authentication checking at this level.

• Something could also be done at the RouterLink level to show / hide route links. In this case, you can apply roles on these links based on related route configuration and current user hints. See this question for more details:

  • Angular2. How to hide(no-render) the link in the menu after check access?

This can be also handled within an HTTP interceptor (a class that extends the Http one). In this case, when a request is executing, you can plug some authentication checks:

@Injectable()
export class CustomHttp extends Http {
  constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
    super(backend, defaultOptions);
  }

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    console.log('request...');
    if (isAuthenticated()) {
      return super.request(url, options).catch(res => {
        // do something
      });        
    } else {
      // Redirect to login page
      // Or throw an exception: return Observable.throw(new Error(...));
    }
  }

  (...)
}

See this question for more details:

• How to create interceptors in Angular2?