0

I am using Angular 4 CLI project and I have angular service, angular component, interceptor, guard and other regular items.

My Angular service component has following item:

export class AdminAuthService {
   adminAuthContext: AdminAuthContext;
   constructor(private httpClient: HttpClient, private urlService: UrlService) {
      ... other code ...
      this.loadSecurityContext();
   }

   loadSecurityContext() {
    this.httpClient.get<AdminAuthContext>(`${this.urlService.url_authContext}`)
        .subscribe(context => {
            this.adminAuthContext = context;
        }, error => Utils.logErrorResponse(error));
    }
}

My Component has following code:

export class ArticleManagerComponent{
   constructor(private route: ActivatedRoute, private articleService: ArticleService, private adminAuthService: AdminAuthService) {
   }
   isAdmin() {
      let canActivate = this.adminAuthService.adminAuthContext && this.adminAuthService.adminAuthContext.claims && (this.adminAuthService.adminAuthContext.claims.find(claim =>  claim.type === 'http://schemas.microsoft.com/ws/2008/06/identity/claims/role' && claim.value === 'Admin'));
      return canActivate;
   }
}

Now, I have Component.Html

<div class="rightpane" *ngIf="isAdmin()">
<admin-article-edit [selectedArticleId]="articleEdit_articleId"></admin-article-edit>

Now, I call AdminAuthServie through my Login component and make sure that I have aminAuthContext object set.

Now, I call Article component and It call isAdmin method where I am getting AdminAuthContext undefined.

Can anyone tell why? and How to fix this?

Brijesh
  • 61
  • 1
  • 11
  • Seeing as `loadSecurityContext` is asynchronous, are you sure that it has completed by the time you call `isAdmin`? – user184994 Sep 01 '18 at 16:22
  • yes, I am. before I call the IsAdmin, I debug (in vs code) and confirm that while service method called loadsecuritycontext I have breakpoint where It set my context variable and it hit and set it correctly. but when component is getting called, that service object gives undefined for the same variable. – Brijesh Sep 01 '18 at 17:58
  • And if you continue from that breakpoint, you still see the error? Sounds like the 2 components may be using separate instances of the service then – user184994 Sep 01 '18 at 18:02
  • may be possible but how can we confirm? – Brijesh Sep 01 '18 at 19:58
  • How do you provide the services? In a module? Which module? Or have you added it to the `providers` array in each component? – user184994 Sep 01 '18 at 19:59
  • Please post a https://stackblitz.com/ – Patricio Vargas Sep 02 '18 at 05:08
  • looks like It's due to the case sensitivity. I have aspnet core and it's pascal casing json by default. but in angular I have same class and object, it's camel casing. I have changed the aspnet core default json configuration serialization to use camel case and it started working. However I have another issue (little bit similar) https://stackoverflow.com/questions/52134624/angular-guard-is-not-able-to-access-the-angular-service-object I have checked all the casing and everything looks ok here (same project so, it should work but it's not working) if anyone case suggest why? – Brijesh Sep 02 '18 at 06:54

0 Answers0