Angular 应用程序陷入无限循环

大开发詹姆斯

我有一个 Angular Web 应用程序,它使用 @microsoft/microsoft-graph-client 来获取登录用户的信息。@azure/msal-angular 用于登录用户。我有一个身份验证服务,可以通过以下方式登录用户:

  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 如下所示:

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() 被调用时,整个应用程序挂起,弹出窗口永远不会关闭,并且似乎永远不会进行身份验证并重定向回我的页面。我不确定为什么会这样。谁能看到任何明显的错误?

编辑

我离开上面的内容是因为这是我最初的问题。我意识到这个问题与我原来的标题无关,并更改了问题的名称。

大开发詹姆斯

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

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

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

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在angular应用程序中使用pyramidjs

来自分类Dev

Angular在线/离线应用程序

来自分类Dev

Angular / JS Express应用程序在生产模式下处于无限路由循环中,在开发模式下运行良好

来自分类Dev

避免Angular应用程序中的超时

来自分类Dev

程序陷入无限循环-Java

来自分类Dev

程序陷入无限循环

来自分类Dev

Angular中的单页应用程序

来自分类Dev

GAE / Angular应用中window.init()上的无限循环

来自分类Dev

Android:onLongClickListener时-陷入无限循环并挂起应用程序

来自分类Dev

关于发布Angular 2应用程序

来自分类Dev

Angular应用程序设计

来自分类Dev

应用解析器陷入无限循环

来自分类Dev

在Angular中调用外部应用程序

来自分类Dev

Angular应用程序如何启动?

来自分类Dev

优化后,Angular应用程序中的Angular Element会产生无限重载问题

来自分类Dev

Angular应用程序教程

来自分类Dev

避免Angular应用程序中的超时

来自分类Dev

Angular中的单页应用程序

来自分类Dev

程序陷入无限循环

来自分类Dev

访问Angular应用程序的api

来自分类Dev

Angular材质与angularJS应用程序

来自分类Dev

汇编语言程序陷入无限循环

来自分类Dev

保护Angular应用程序

来自分类Dev

Angular应用程序中FOR循环的异常行为

来自分类Dev

Angular 2应用程序的范围

来自分类Dev

在NativeScript / Angular应用程序中绘图?

来自分类Dev

保护 Angular 应用程序

来自分类Dev

Ping Angular 2 应用程序

来自分类Dev

Java TCP Client-Server - 在两个应用程序中都陷入无限循环