Bla*_*mba 12 javascript api interceptor 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);
}
}
Run Code Online (Sandbox Code Playgroud)
但在我的情况下,有一个令牌,我需要添加请求正文而不是请求标题,所以有任何方法来修改正文.
更新:Mild Fuzz的方法适用于简单的帖子请求,但我想添加查询,如果它是GET请求和正文,如果它允许添加正文.最重要的是,当我尝试发送表单数据时它就破了.
...request.body删除表单数据并将其转换为JSON对象,以便我的图像消失.
Mil*_*uzz 10
req = req.clone({
headers: req.headers.set('Accept', 'application/json'),
body: {...req.body, hello: 'world' }});
Run Code Online (Sandbox Code Playgroud)
这样的事情?
多亏了我想要的Mild Fuzz,但在我的情况下,我却遇到了一些并发症,并且可以解决一些额外的头痛问题。这是我的最终实现:
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;
}
}Run Code Online (Sandbox Code Playgroud)