Question

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

重定向URL：https://mytesting.com/?someValue=123E234

之后

我希望在重定向后登录到默认页面（https://mytesting.com/?someValue=123E234）时检索“ someValue”。在Java中，我们可以通过过滤器检索它。在Angular中，我使用的是Interceptor，但拦截器从未被调用，也不知道如何使用Interceptor来实现这一目标

shared / 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);
  }

}

home.componet

  @Component({
  selector: 'home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
   })

   export class LoginComponent implements OnInit{
   constructor(private someservice: SomeotherService,
          private _router: Router) {

    ngOnInit() {
    window.location.href ="https://GoingforAuthentication.com"
     }


   }


  }

app.module.ts

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

Answer 1

providers中的更改：

ExampleAuth

收件人：

{ provide: HTTP_INTERCEPTORS, useClass: ExampleAuth, multi: true }

还请检查以下内容：https://angular.io/guide/http#intercepting-requests-and-responses

Answer 2

Http拦截器曾经通过HttpClient的调用来拦截您的请求。您需要做的只是检查在应用启动时网址中是否有必需的参数。为此，您需要在ActivatedRoute

中注入app.component.ts服务

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

并检查someValue中的ngOnInit

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

https://angular.io/api/router/ActivatedRoute

Answer 3

我认为您不需要使用拦截器。此逻辑将特定于您的组件。您可以订阅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代码中内部更新了查询参数，也可以在订阅查询参数时相应地更新视图。

Angular 7拦截器

3 个答案: