web-dev-qa-db-ja.com

Angularインターセプター内のリクエストの本文に何かを追加するには？

この機能に関する複数のチュートリアルが存在するため、ここでヘッダーを変更できますが、

@Injectable()
export class MyFirstInterceptor implements HttpInterceptor {

    constructor(private currentUserService: CurrentUserService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        console.log(JSON.stringify(req));

        const token: string = this.currentUserService.token;

        if (token) {
            req = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + token) });
        }

        if (!req.headers.has('Content-Type')) {
            req = req.clone({ headers: req.headers.set('Content-Type', 'application/json') });
        }

        req = req.clone({ headers: req.headers.set('Accept', 'application/json') });
        return next.handle(req);
    }
}

しかし、私の場合、リクエストヘッダーの代わりにリクエストボディを追加する必要があるトークンがあるので、ボディを変更する方法があります。

更新：Mild Fuzzのメソッドは単純なポストリクエストに対してはうまく機能しますが、GETリクエストの場合はクエリに追加し、ボディを追加できる場合はボディに追加したいと思います。そして最も重要なことは、フォームデータを送信しようとしたときに壊れました。 ...request.bodyはフォームデータを削除し、それをJSONobjectに変換して、画像が消えるようにします。

javascriptangularapiinterceptor
12
Black Mamba

マイルドファズのおかげで私は望んでいたものでしたが、私の場合、いくつかの合併症がありましたが、これは頭痛の種で解決できました。最終的な実装は次のとおりです。

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

    console.log('Intercepted!', req);
    const authService = this.injector.get(AuthService);
    const reqCloned =  this.handleBodyIn(req, localStorage.getItem('random_key'), 'random_key_added');
    const copiedReq = reqCloned;
    return next.handle(copiedReq);
  }
  handleBodyIn(req:HttpRequest<any>, tokenToAdd, tokenName) {
    if (req.method.toLowerCase() === 'post') {
      if (req.body instanceof FormData) {
        req =  req.clone({
          body: req.body.append(tokenName, tokenToAdd)
        })
      } else {
        const foo = {}; foo[tokenName] = tokenToAdd;
        req =  req.clone({
          body: {...req.body, ...foo}
        })
      }            
    } 
    if (req.method.toLowerCase() === 'get') {
      req = req.clone({
        params: req.params.set(tokenName, tokenName)
      });
    } 
    return req;    
  }
}

他の誰かがチェックしたい場合の編​​集リンクです。

4
Black Mamba
 req = req.clone({ 
  headers: req.headers.set('Accept', 'application/json'),
  body: {...req.body, hello: 'world' }});

このようなもの？

9
Mild Fuzz