Angular应用陷入无限循环 [英] Angular Application stuck in an endless loop

问题描述

我有一个使用@ microsoft/microsoft-graph-client来获取登录用户信息的Angular Web应用程序. @ azure/msal-angular用于登录用户.我有一个使用此用户登录的身份验证服务:

I have an Angular web application that is using @microsoft/microsoft-graph-client to get the logged in user's information. @azure/msal-angular is used to sign-in the user. I have an auth service that logs the user in with this:

  async signIn(): Promise<void> {
    const result = await this.msalService.loginPopup(OAuthSettings.consentScopes)
      .catch((reason) => {
        this.alertsService.add('Login failed', JSON.stringify(reason, null, 2));
      });

    if (result) {
      this.authenticated = true;
      await this.getUser();
    }
  }
  private async getClient(): Promise<Client> {
    const graphClient = Client.init({
      // Initialize the Graph client with an auth
      // provider that requests the token from the
      // auth service
      authProvider: async (done) => {
        const token = await this.getAccessToken()
          .catch((reason) => {
            done(reason, null);
          });
        if (token) {
          done(null, token);
        } else {
          done('Could not get an access token', null);
        }
      }
    });
    return graphClient;
  }

private async getUser() {
    if (!this.authenticated) {
      return null;
    }
    const graphClient = await this.getClient();

    // Get the user from Graph (GET /me)
    const graphUser = await graphClient.api('/me').get();

    console.log('USERNAME: ', graphUser.displayName);
    sessionStorage.setItem('d365dataportal.user', graphUser);
    if (graphUser.mail != null) {
      sessionStorage.setItem('d365dataportal.user.email', graphUser.mail);
    } else {
      sessionStorage.setItem('d365dataportal.user.email', graphUser.userPrincipalName);
    }
    sessionStorage.setItem('d365dataportal.user.avatar', graphUser.avatar);
    sessionStorage.setItem('d365dataportal.user.name', graphUser.displayName);
  }

我的OAuthSettings看起来像这样:

My OAuthSettings look like this:

export const OAuthSettings = {
  appId: 'App GUID from Azure Here',
  redirectUri: 'http://localhost:4200',
  consentScopes: ['user.read',
    'Directory.Read.All',
    'Directory.ReadWrite.All',
    'Directory.AccessAsUser.All']
};

我遇到的问题是，当调用this.msalService.loginPopup()时，整个应用程序都将挂起，弹出窗口永远不会关闭，并且似乎永远也不会进行身份验证并重定向回我的页面.我不确定为什么会这样.谁能看到任何明显的错误?

The problem I am running into is that when this.msalService.loginPopup() is called, the entire application hangs, the popup window never shuts, and never seems to authenticate and redirect back to my page. I am not sure why this is happening. Can anyone see any glaring errors?

编辑

我要保留上面的内容，因为这是我的原始问题.我意识到问题与我的原始标题无关，因此更改了问题的名称.

I am leaving the content above because it was my original question. I realized that the issue had nothing to do with my original title and changed the name of the question.

推荐答案

我解决了我的问题，与使用Azure AD或Graph API无关.在我的组件html中，我有一个* ngIf用来寻找函数的结果.看起来像这样:

I solved my problem, and it had nothing to do with using Azure AD or Graph API. In my component html, I had an *ngIf that was looking for the result of a function. It looked like this:

<a mat-list-item *ngIf="authService.functionThatReturnsBoolean()" [routerLink]="['/SomeRoute']" routerLinkActive="router-link-active">Link Name</a>

相反，我更改了服务，以将结果填充到服务的一个属性中，并将* ngIf指向该属性，如下所示:

Instead, I changed my service to populate the results in a property in the service and pointed the *ngIf at that property like this:

<a mat-list-item *ngIf="authService.booleanProperty" [routerLink]="['/SomeRoute']" routerLinkActive="router-link-active">Link Name</a>

问题与Angular继续在* ngIf中查找状态的方式有关.然后它陷入了一个无休止的循环，直到Chrome崩溃.

The problem had to do with the way Angular continues to look for the status in the *ngIf. It was then stuck in what appeared to be an endless loop until Chrome crashed.

这篇关于Angular应用陷入无限循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！