Question

这就是我想要的：当我发送网络请求时，希望intercept可以自动添加headers。

所以我做了一个intercept来实现目标。我计划通过LocalStorage获得价值。然而，它的执行方式是异步的，因此请求无法赶上storage。

接下来我该怎么做？

我的代码如下：

intercept(req: HttpRequest<any>, next: HttpHandler):
   Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> {
    console.log('into intercept');
    let url = req.url;
    let opuser;
    this.storage.get('userInfo').then((val) => {
        opuser = val.Noid; // get the value what I need
    });

    if (opuser === undefined) {
        opuser = 'undefined';
    }
    const newReq = req.clone({
        url: url
    }).clone({
        setHeaders: { opuser: 'undefined' }
    });// set the headers
    return next.handle(newReq).pipe(
        mergeMap((event: any) => {
            return of(event);
        })
    );
}

Answer 1

您应该在调用拦截器之前准备标题。

好的选择：

当您的应用程序启动时，请获取标题并将其存储在提供程序中。这样您就可以同步/直接访问它。

opUserHeader: any;

setOpuserHeader(){
   return this.storage.get('userInfo').then((val) => {
      this.opUserHeader = val.Noid; // get the value what I need
   });
}

getOpuserHeader(){
   return this.opUserHeader ? this.opUserHeader : 'undefined';
}

当您启动应用时，您可以在 app.component.ts 或第一页（您选择）中通过您的服务调用该方法，并且您的标头值将存在于内存中：

headersService.setOpuserHeader().then(() => { console.log('Header is set')};

现在拦截器应该看起来很干净，你可以直接获取值：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // Get the header from service, attach to the cloned request and continue
    const opUserHeader = this.headersService.getOpuserHeader();
    const authReq = req.clone({setHeaders: {opuser: opUserHeader}});
    return next.handle(authReq);

}

错误选项：

您可以将现有代码放在localStorage承诺中，并从中获取所有请求的值，但性能会受到影响。

编辑第2部分：

你真的不需要拦截器函数内的地址，但你应该用正确的限定符调用 POST 方法。

复杂的选项可以覆盖HttpClient并将您的地址连接到所有方法（如果您不更改端点），或者在您的情况下最简单和最可持续的方法是将地址保存在服务中并要求每次你需要的时候都这样：

apiURL = 'http://120.XXX.XXX.XXX:81/';

getApiURL(){
     return this.apiURL;
}

每次调用HttpClient：

const apiURL = myService.getApiURL();
this.httpClient.post(apiURL + 'api/login', params);

祝你好运！

如何将Ionic的LocalStorage设置为同步？

1 个答案: