Question

我遇到了以下情况：我使用Auth0进行用户身份验证。当我首次登录时，我有一个auth.service，它检索用户配置文件并将其存储在本地存储中。此服务注入名为items.component的组件中。我想检查我的个人资料的属性（profile.user_metadata.admin），并在第一次登录后立即显示在我的html的div中。问题是该配置文件不会存储在本地存储中直到最后，我只能检查它是否检查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

在我直接回答这个问题之前，我应该说明在登录时使用路由更为常见。如果您未经过身份验证，则您的路线可能类似于＆＃39; / signIn＆＃39;。成功验证后，您将转到另一个页面＆＃39;这将呈现您的ItemsComponent（例如＆＃39; / home＆＃39;）。在这种情况下，除非您已登录，否则您将看不到ItemsComponent，因此它将始终解析。因为它是在auth发生之前加载组件，这使得生活变得比原本更难。

如果要显示ItemsComponent是否已登录，然后您希望在登录时显示div，则一种方法是在auth服务中创建经过身份验证的observable并将其设置为false，然后在验证时，将其设置为true。然后在您的ItemsComponent中，您需要订阅该observable，以便在您登录后更改时，您可以在成功回调中运行您的身份验证代码。基本上，只要您登录或退出，该代码就会运行。

如果您还不确定Observables，请使用路由建议。这更容易。

首次登录成功太晚时获取Auth0用户个人资料

1 个答案: