получить профиль пользователя Auth0 при первом успешном завершении регистрации

Question

Я столкнулся со следующим соотношением: Я использую Auth0 для аутентификации пользователей. Когда я первый логин, у меня есть auth.service, который извлекает профиль пользователя и сохраняет его в локальном хранилище. Эта услуга вводится в мой компонент под названием items.component. Я хочу проверить свойство моего профиля (profile.user_metadata.admin) и показать его в div моего html сразу после первого входа. Проблема в том, что профиль не будет храниться в локальном хранилище до самого конца, и я могу проверить его только в том случае, если я проверю ngAfterViewChecked(), который вызывает ошибку, если я запускаю в режиме разработчика. Как я могу получить свой профиль раньше? Или сделать чек по-другому? Заранее спасибо.

auth.service.component.ts

@Injectable() 
export class Auth { 
    // Configure Auth0 
    lock = new Auth0Lock('xxxhiddenxx', 'xxxhiddemxxx', {}); 

    profile:any; 

    constructor(private authHttp: AuthHttp, private router: Router) { 
    // Add callback for lock `authenticated` event 
    // this.userProfile = JSON.parse(localStorage.getItem('profile')); 


    this.lock.on("authenticated", (authResult:any) => { 
    this.lock.getUserInfo(authResult.accessToken, function(error:any, profile:any){ 
     if(error){ 
       throw new Error(error);      
     } 
     localStorage.setItem('id_token', authResult.idToken); 
     localStorage.setItem('profile', JSON.stringify(profile)); 


    }); 

}); 



    } 

    public login() { 
    // Call the show method to display the widget. 
    this.lock.show(); 
    } 

    public authenticated() { 

    // Check if there's an unexpired JWT 
    // This searches for an item in localStorage with key == 'id_token' 
    return tokenNotExpired(); 
    } 

items.component.ts

export class ItemsComponent implements OnInit { 

items: Item[]; 
isAdmin:boolean; 
profile:any; 


    constructor(private ItemService:ItemService,private auth:Auth, private authHttp: AuthHttp, private router: Router){ 
     this.ItemService.getItems() 
     .subscribe(items =>{ 
      this.items=items; 

//this.profile=JSON.parse(localStorage.getItem('profile')); 
//this never finds the profile when first login occurs 

    }); 
} 

ngAfterViewChecked(){ //only way I can get the profile data when first login 

     this.profile=JSON.parse(localStorage.getItem('profile')); 

     if(this.profile!=undefined && this.profile!=null){ 
      console.log(this.profile.user_metadata.admin) 

      if(this.profile.user_metadata.admin==1){ 

       this.isAdmin=true; 
     } 
     } 

} 

items.component.html

   <div class="row" *ngIf="auth.authenticated()" style="margin: 20px 20px"> 
     <div class="alert alert-success col-md-3 center" *ngIf="isAdmin===true">Admin account</div> 
     </div> 

Answer 1

Прежде чем ответить на этот вопрос напрямую, я должен указать, что при входе в систему чаще использовать маршрутизацию. Если вы не прошли аутентификацию, маршрут может быть похож на «/ signIn». При успешном авторизации вы переходите на другую страницу, которая будет отображать ваш ItemComponent (например, «/ home»). В этом случае вы не увидите элемент ItemsComponent, если вы не вошли в систему, поэтому он всегда будет разрешен. Так как вы загружаете компонент до того, как произошел аут, что усложняет жизнь, чем в противном случае.

Если вы хотите показать ItemsComponent независимо от того, вошли ли вы в аккаунт, и затем вы хотите, чтобы div отображался при входе в систему, один из способов сделать это - создать аутентифицированный наблюдаемый в службе auth и установить его на false, а затем, когда он аутентифицирован, установите значение true. Затем в вашем ItemsComponent вам необходимо подписаться на это наблюдаемое, чтобы при его изменении после входа в систему вы можете запустить свой код аутентификации в обратном вызове. В принципе, этот код будет запускаться всякий раз, когда вы входите в систему или выходите из нее.

Если вы еще не уверены в Observables, перейдите с предложением маршрутизации. Легче.