Listening for Authentication status change in AgileApps CUI template

Knowledge base
, ,
1
Following authentication status events are available in a CUI template
  1. AceEventAuthenticated (dispatched upon successful login event)
  2. AceEventUnauthenticated (dispatched upon logout/session time out event)

Listening for these events will help performing specific actions on CUI template.

Using native JavaScript way to listen for these events

<script type="text/javascript">
  window.addEventListener('load', () => {
    document.body.addEventListener('AceEventAuthenticated', () => {
      // navigate to application main content
    });
    document.body.addEventListener('AceEventUnauthenticated', () => {
      // navigate to login page
    });
  });
</script>

If you are using Angular framework, use the following code sample

import { Component, Inject, OnInit } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(@Inject(DOCUMENT) private document: Document) {}
  ngOnInit(): void {
    this.document.body.addEventListener('AceEventAuthenticated', () => {
      // navigate to application main content
    });
    this.document.body.addEventListener('AceEventUnauthenticated', () => {
      // navigate to login page
    });

  }
}