web-dev-qa-db-fra.com

Comment ajouter quelque chose au corps de la requête à l'intérieur d'un intercepteur Angular?

Ici, je peux modifier l'en-tête car il existe plusieurs tutoriels concernant cette fonctionnalité, mais:

@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);
    }
}

Mais dans mon cas, il y a un jeton dont j'ai besoin pour ajouter le corps de la demande au lieu de l'en-tête de la demande, il existe donc une méthode pour modifier le corps.

Mise à jour: la méthode de Mild Fuzz fonctionne très bien pour une simple demande de publication, mais j'aimerais ajouter à la requête s'il s'agit d'une demande GET et d'un corps s'il permet d'ajouter un corps. Et surtout, il s'est cassé lorsque j'ai essayé d'envoyer des données de formulaire. ...request.body supprime les données du formulaire et les transforme en objet JSON pour que mon image disparaisse.

javascriptangularapiinterceptor
12
Black Mamba

Grâce à Mild Fuzz, c'était ce que je voulais, mais dans mon cas, j'ai eu quelques complications que j'ai pu résoudre avec quelques maux de tête supplémentaires. Voici ma mise en œuvre finale:

  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;    
  }
}

Voici le lien de l'éditeur si quelqu'un d'autre veut vérifier.

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

quelque chose comme ça?

9
Mild Fuzz