Security Directives not updating in all components

[giovannicandido]

Suppose we have a topbar and two routes:

• home
• profile

Profiles is protected, home is not top bar is part of app

Problem: The security directives work only inside profile, if topbar has directives it is not updated. Looks like databind between AuthService (where login and logout is stored) and the directives is not trigged in some situation.

Needs investigation and tests

[giovannicandido]

I think this happen because outside the scope of router there is no login context:

<app-topbar (onMenuClick)="sideMenu.toggle()"></app-topbar>
<app-sidemenu (onShow)="moveContentRight()"
              (onHide)="moveContentLeft()" #sideMenu></app-sidemenu>
<div #content class="content-padder content-background">
  <router-outlet></router-outlet>
</div>

Somehow there is no context outside router.

[giovannicandido]

Found the cause:

@Directive({ selector: '[secIsAuthenticated]' })
export class SecIsAuthenticated {

  private _context = new RoleContext()

  constructor(
    protected element: ViewContainerRef,
    protected domService: DomService,
    private auth: AuthService,
    private templateRef: TemplateRef<RoleContext>
  ) {
  }

  @Input('secIsAuthenticated')
  set action(config: any) {
    if (config && config.action) {
      this._context.$action = config.action

    }
    if (config && config.cssClass) {
      this._context.$cssClass = config.cssClass
    }
    this.applyDirective()
  }

  applyDirective() {
    this.element.clear()
    this.auth.isUserLoggedIn().then(logged => {
       this.domService.performAction(this.element, this.templateRef, this._context, logged)
    })
  }
}

auth.isUserLoggedIn is a promise. This will work only one time in the startup of application.

Needs to be a global observable, this can guarantee all directives are update in all components.