代码之家 › 专栏 › 技术社区 › raju

如何使用Angular6拦截器更改HTTP REQ URL

angular

raju · 技术社区 · 7 年前

我正在学习angular6 http和拦截器。

我已经创建了一个拦截器

@Injectable()
export class HttpsRequestInterceptor implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    console.log(req);
    if(req.url == 'https://abcd.azure.net/api/v1/getPendinList') {
      // return Observable.empty();
      console.log('hello')
    }
    const dupReq = req.clone({
      headers: req.headers.set('Consumer-Secret', 'some sample key')
    });
     return next.handle(dupReq);
  }
}

这很好,我每次点击都会得到console.log https://abcd.azure.net/api/v1/getPendinList . 我想知道的是,如果我点击了这个url,我想把这个url改成其他的东西,例如。 abcd.api.com/search . 以便我的url从新端点获取数据。

这可能吗?怎么可能。

3 回复 | 直到 7 年前

ngLover 7 年前

是的,您可以用新的 HTTPREQUEST 或者克隆。但是不能直接分配新的url,因为它是一个常量/只读属性。

//Added these lines
//const httpRequest = new HttpRequest(<any>req.method, 'abcd.api.com/search');
//req = Object.assign(req, httpRequest);


@Injectable()
export class HttpsRequestInterceptor implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    console.log(req);
    const httpRequest = new HttpRequest(<any>req.method,'abcd.api.com/search');
    req = Object.assign(req, httpRequest);
    if(req.url == 'https://abcd.azure.net/api/v1/getPendinList') {
      // return Observable.empty();
      console.log('hello')
    }
    const dupReq = req.clone({
      headers: req.headers.set('Consumer-Secret', 'some sample key')
    });
     return next.handle(dupReq);
  }
}

Steve 6 年前

来自: https://stackoverflow.com/a/45735866/1778005

这对我有效:

const dupReq = req.clone({ url: 'mynewurl.com' });
return next.handle(dupReq);

Robert 6 年前

nglover answer的问题是,他重写了所有内容,因为他正在创建新的http请求,该请求将具有空主体正确的答案其实更简单

const newUrl = {url: 'new-url'};
req = Object.assign(req, newUrl);

只有那条路 url 属性将被重写,其余属性(包括正文)将不会更改

推荐文章

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

5 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

5 月前

Jihed Ben Zarb · 造型角材料日期选择器

6 月前

st_clair_clarke · 为angular v19资源API创建可重复使用的加载器,其中包含2个不同类型的请求参数

6 月前

Ajay Kulkarni · Angular 19-重新路由到子路由未按预期工作

6 月前

Ajay Kulkarni · 路由器与导航上的路线不匹配

6 月前

Jace Johnson · Typescript文件读取的变量类型错误

6 月前

Ole · Angular资源API是否支持为资源添加初始值?

6 月前

Ole · 在使用新的Angular Resource API时取消搜索术语?

6 月前