I am building an application using Angular 7, I have handled the API calls, the JWT Token authentication system using C#, and also updating the LocalStorage() when necessary, when the user logs in and logs out, and all these are working perfectly.

My problem is I want it to run a login check as a middleware within the application rather than on the lifecycle method - ng.onInit(). How do I go about this?

Is there a way to execute lifecycle events as an entry ponent or service. That is, before any ponent loads it is able to check if the user is logged in or not and redirect via Router to a desired page.

I am building an application using Angular 7, I have handled the API calls, the JWT Token authentication system using C#, and also updating the LocalStorage() when necessary, when the user logs in and logs out, and all these are working perfectly.

My problem is I want it to run a login check as a middleware within the application rather than on the lifecycle method - ng.onInit(). How do I go about this?

Is there a way to execute lifecycle events as an entry ponent or service. That is, before any ponent loads it is able to check if the user is logged in or not and redirect via Router to a desired page.

• javascript
• angular
• typescript
• angular7

• If you do a singleton, only one instance of the service will exist in the app. Maybe that will help? angular.io/guide/singleton-services – Nick Gallimore Commented Jan 21, 2020 at 14:25
• Use APP_INITIALIZER. stackoverflow./questions/49707830/… – mbojko Commented Jan 21, 2020 at 14:26
• You can try Can Activate interface to make it as same as middleware angular.io/api/router/CanActivate – carte Commented Jan 21, 2020 at 14:27
• You can handle the login check in the app.ponent.ts, you simply inject the service there. Then you set that value in the local storage. Then you can use a custom Guard to restrict access to pages. Also, set a bool in the service to true if they are logged in. Then you inject that auth service in other ponents and you check that value. Only set the value in the app.ponent.ts though. – Nick Gallimore Commented Jan 21, 2020 at 14:27

3 Answers 3

Guard is based on the routes... so I think you should prefer a module/service solution.

import { APP_INITIALIZER } from '@angular/core';

then add it as a provider like this :

 export function initApp(initService: YourInitService) {
  return () => { 
    initService.Init();
  }
}
    { provide: APP_INITIALIZER,useFactory: initApp, deps: [YourInitService], multi: true } 

You should check for Guard in angular, especially canActivate Guard: https://angular.io/guide/router

A guard is created like this:

@Injectable({
  providedIn: 'root'
})
export class MyGuard implements CanLoad {
 constructor() {}

 canLoad(route: Route, segments: UrlSegment[]): Observable<boolean> | 
 Promise<boolean> | boolean {
   const x = true;
   if (x) {
     return true; // It allows access to the route;
   } else {
      // redirect where you want;
     return false; // it doesnt allow to access to the route
  }
 }
}

Then in your routing Module:

{
path: "yourRoute",
canActivate: [MyGuard],
ponent: YourComponent
}

For authentication, you have a good library that uses guard here: https://www.npmjs./package/ngx-auth

You should implement an authGuardService or something like that to use as middleware for your routing (using the canActivate section)

See: https://angular.io/api/router/CanActivate

This prevents routes from being loaded if the canActivate fails the condition (which is preferred when using a login system etc instead of checking in lifecycle hooks).