Angularjs 为什么我的Angular应用程序卡在重定向循环中？

我有一个Angular应用程序（Angular 11），我想使用GitHub OAuth（）进行身份验证。我想在项目的根目录中进行身份验证。我将其设置如下，但我陷入了重定向循环（即，我重定向到GitHub，重定向到

http://localhost:4200

，重定向回GitHub，等等），我不知道为什么。我觉得这可能与

这个.authenticationService.requestAuthorization（code，state）.subscribe（…）

有关，就像我没有等待订阅完成一样

我已经确认，当我取出重定向并在URL中从GitHub传递代码时，订阅完成，令牌被写入本地存储

编辑：我将身份验证放在一个单独的组件中，默认情况下应用程序将重定向到该组件，从而使其正常工作。我意识到重定向循环来自每个组件加载

app.Component.ts

。有没有办法在不设置单独组件的情况下实现这一点，即只有一个组件是

app.Component.ts

app.component.ts

：

import { Component, OnInit } from '@angular/core'
import { ActivatedRoute, Router } from '@angular/router'
import { NGXLogger } from 'ngx-logger'
import { environment } from '../environments/environment'
import { AuthenticationService } from './authentication.service'
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  title = 'github-auth-test'

  githubAuthToken!: string | null
  error!: string

  constructor(
    private route: ActivatedRoute,
    private logger: NGXLogger,
    private authenticationService: AuthenticationService,
    private router: Router
  ) {}
  ngOnInit(): void {
    this.logger.debug(`Query (snapshot)`, {
      query: this.route.snapshot.queryParams,
    })
    if (!localStorage.getItem('github-auth-token')) {
      this.logger.debug('No GitHub auth token present')

      this.route.queryParams.subscribe((query) => {
        const { code, state, err } = query
        if (Object.keys(query).length) {
          this.logger.debug(`Query params: `, { query })

          if (code) {
            this.logger.debug(
              `appComponent::ngOnInit (requesting authorization)`,
              { code, state }
            )
            this.authenticationService
              .requestAuthorization(code, state)
              .subscribe(
                (result) => {
                  this.logger.info(
                    `Auth successful. Result: ${JSON.stringify({ result })}`,
                    { result }
                  )
                  const { token, returnTo } = result
                  this.logger.info(`Store auth token`, { token })
                  localStorage.setItem('github-auth-token', token)
                  if (returnTo) {
                    this.logger.debug(`Return to: ${JSON.stringify(returnTo)}`)
                  } else {
                    this.router.navigate(['/'])
                  }
                },
                (err) => {
                  window.location.href = `http://localhost:4200?error=${err}`
                }
              )
          } else if (err) {
            this.error = err
            localStorage.removeItem('github-auth-token')
          }
        } else {
        // if (!err) {
          const request_id = 'bjkfdalkflfdalaf'
          const state = { request_id }
          this.logger.debug(
            `Would redirect to ${this.githubAuthEndpoint(state)}`
          )
          window.location.href = this.githubAuthEndpoint(state)
        }
      })
    } else {
      this.githubAuthToken = localStorage.getItem('github-auth-token')
      this.logger.info(
        `Auth token: ${localStorage.getItem('github-auth-token')}`
      )
    }
  }

  private githubAuthEndpoint(state: unknown): string {
    const githubEndpoint = new URL(environment.authentication.authUri)
    githubEndpoint.searchParams.append('state', JSON.stringify(state))
    githubEndpoint.searchParams.append(
      'redirect_url',
      environment.authentication.redirectUri
    )
    githubEndpoint.searchParams.append('scope', 'repo')
    githubEndpoint.searchParams.append('allow_signup', 'false')
    return githubEndpoint.toString()
  }
}