Prevent page access if not logged in and redirect to login page

Use case: In your NgxApp application you have multiple pages. You want to prevent a user to access directly theses pages if the user is not logged and in this case redirect the user to a login page.

We will make use of the AppGuard | Convertigo Documentation component.

Add the AppGuard event to the NgxApp set it to onCanActivate event.

As a child, add a customAction component. The following code is a usage example:

let e = event;
console.log("e:", e);
if (e["pageName"] == "Login"){
	resolve(true)
}else{
	if(page.global.isConnected){
		resolve(true);
	}else {
		page.router.setRoot("Login", {}, null);
		resolve(false);
	}
}

Create a “Login” Page with a form. The onSubmit event will call a login sequence and if access is granted you will set a Global component isConnected to true (tested in the customAction code).