首次登录成功太晚时获取 Auth0 用户配置文件

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

在我直接回答这个问题之前，我应该声明，登录后使用路由更常见。如果您未通过身份验证，您的路由可能类似于“/signIn”。在成功的身份验证后，您将路由到另一个 'page' 来呈现您的 ItemsComponent（例如“/home”）。在这种情况下，除非您已登录，否则您将看不到 ItemsComponent，因此它始终会解析。因为它是在 auth 发生之前加载组件，这让生活变得比其他情况更困难。

如果您想显示 ItemsComponent 是否已登录，然后您希望 div 在您登录时显示，一种方法是在auth 服务并将其设置为 false，然后在通过身份验证后将其设置为 true。然后在您的 ItemsComponent 中，您需要订阅该可观察对象，以便在您登录后更改时，您可以运行在成功回调中使用您的授权代码。基本上，无论何时您登录或注销，该代码都会运行。

如果您还不确定 Observables，请按照路由建议进行操作。这更容易。

首次登录成功太晚时获取 Auth0 用户配置文件

get Auth0 user profile when first login success too late

angular

user-profile

auth0