Angular 角7拦截器

我正在调用一个API，该API重定向到外部url进行身份验证，然后再次重定向到我的主页，并在主页url中附加一些参数

默认URL:

重定向URL后：

我想在重定向后登陆到默认页面（）时检索“someValue”。在java中，我们可以通过过滤器检索它。在Angular中，我正在使用Interceptor，但Interceptor从未被调用，也不知道如何使用Interceptor实现这一点

共享/exampleAuth.interceptor.ts

@Injectable()
export class ExampleAuth implements HttpInterceptor {

  intercept(request: HttpRequest<any>, next: HttpHandler):
    Observable<HttpEvent<any>> {

    console.log('Checking Interceptor'); // This is never called
    return next.handle(request);
  }

}

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpModule
  ],
  providers: [
    SomeotherService,
    ExampleAuth
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

---

提供程序中的更改

：

ExampleAuth

致：

---

还请检查此项：

提供程序中的更改：

ExampleAuth

致：

---

还请检查此项：

用于通过HttpClient调用拦截您的请求的Http侦听器。你们需要做的只是在你们的应用程序启动时检查你们的url中是否有必需的参数。为此，您需要在

app.component.ts

constructor(private _route: ActivatedRoute, ....) { ... }

并在

ngOnInit

ngOnInit() {
    const someValue = this._route.snapshot.queryParams['someValue'];
    if (someValue == '....') {
        // have been redirected from auth
    }
}

---

Http拦截器，用于通过HttpClient的调用拦截您的请求。你们需要做的只是在你们的应用程序启动时检查你们的url中是否有必需的参数。为此，您需要在

app.component.ts

constructor(private _route: ActivatedRoute, ....) { ... }

并在

ngOnInit

ngOnInit() {
    const someValue = this._route.snapshot.queryParams['someValue'];
    if (someValue == '....') {
        // have been redirected from auth
    }
}

---

我认为你没有必要使用拦截器。此逻辑将特定于您的组件。您可以订阅

ActivatedRoute

中的可见项，以动态获取查询参数

import { ActivatedRoute } from '@angular/router';
...

  constructor(
    private route: ActivatedRoute
  ) { }

  ngOnInit() {
    this.route.queryParams.subscribe(queryParam => {
      console.log(queryParam.someValue);
      // Do something with new query param here. Eg. update view, api call, etc.
    });
  }

---

这样，即使您在Angular代码中内部更新查询参数，您也可以在订阅查询参数时相应地更新视图。

我认为您不需要使用拦截器。此逻辑将特定于您的组件。您可以订阅

ActivatedRoute

中的可见项，以动态获取查询参数

import { ActivatedRoute } from '@angular/router';
...

  constructor(
    private route: ActivatedRoute
  ) { }

  ngOnInit() {
    this.route.queryParams.subscribe(queryParam => {
      console.log(queryParam.someValue);
      // Do something with new query param here. Eg. update view, api call, etc.
    });
  }

---

---

通过这种方式，即使您在角度代码中内部更新查询参数，您也可以在订阅查询参数时相应地更新视图。

这里是stackblitz，具有最小设置-我已编辑了我的问题。我正在使用window.location.href访问url。我甚至尝试了使用http.window访问URL的示例代码。我在“https:”处获取对XMLHttpRequest的错误访问已被CORS策略阻止：请求的资源上不存在“Access Control Allow origin”标头。我必须重定向URL，身份验证部分在那里完成，并且在成功完成完整身份验证后重新定向到主页。。我不认为使用http调用我们可以进行重新定向..这里是stackblitz，设置最少-我已经编辑了我的问题。我正在使用window.location.href访问url。我甚至尝试了使用http.window访问URL的示例代码。我在“https:”处获取对XMLHttpRequest的错误访问已被CORS策略阻止：请求的资源上不存在“Access Control Allow origin”标头。我必须重定向URL，身份验证部分在那里完成，并且在成功完成完整身份验证后重新定向到主页。。我不认为通过http呼叫我们可以进行重新定向..我必须更新问题。。我正在通过windows.location.hrefy重定向url。当您从身份验证服务重定向回应用程序时，您需要从url获取值，对吗？因此，无论你如何重定向到它…我已经更新了问题。。我正在通过windows.location.hrefy重定向url。当您从身份验证服务重定向回应用程序时，您需要从url获取值，对吗？因此，无论您如何重定向到它…是否存在将用户重定向到外部登录的特定事件？就像登录按钮一样？这和我两小时前回答的不一样吗？@Dimanoid-不完全一样。尽管您的答案适用于这种特殊情况，但如果项目被扩展，并且出现了从组件内部或由子组件更新查询参数的情况，则不会调用

ngOnInit

函数，因此不会相应地更改数据（如果有）。通过订阅，我们告诉Angular“留心”查询参数的任何更改，并进行必要的更改。在问题中，Angular明确说明他重定向到

https://GoingforAuthentication.com

然后回到他的应用程序

https://mytesting.com

这种情况下如何发生“查询参数从组件内部或由子组件更新"? 您的解决方案将导致错误的行为。它不会导致错误的行为，因为它执行与解决方案中相同的操作，只是它订阅URL中的查询参数，以确保对参数的任何进一步更改将反映在组件中，从而使其更具动态性。如果我错了，请纠正我，但我不认为这会导致错误行为。是否存在将用户重定向到外部登录的特定事件？就像登录按钮一样？这和我两小时前回答的不一样吗？@Dimanoid-不完全一样。尽管您的答案适用于这种特殊情况，但如果项目被扩展，并且出现了从组件内部或由子组件更新查询参数的情况，则不会调用

ngOnInit

函数，因此不会相应地更改数据（如果有）。通过订阅，我们告诉Angular“留心”查询参数的任何更改，并进行必要的更改。在问题中，Angular明确说明他重定向到

https://GoingforAuthentication.com

然后回到他的应用程序

https://mytesting.com

这种情况下如何发生“查询参数是从组件内部或由子组件更新的”？您的解决方案将导致错误行为。这不会导致错误