angular 拦截器,
Angular如何拦截和封装请求？下面这篇文章介绍Angular中请求拦截的方法，希望对你有帮助！
在上一篇文章中，Angular使用了Api代理。我们处理了本地联调接口的问题，并使用了代理。
我们的接口是分开编写和处理的。在实际的开发项目中，有很多接口，有些需要登录凭证，有些不需要。一个接口处理不当，可以考虑拦截封装请求吗？【相关教程推荐：《angular教程》】
本文将认识到这一点。
区分环境
我们需要拦截不同环境中的服务。当使用angular-cli生成项目时，它已经自动做出了环境的区分。在应用程序/环境目录中：
环境
环境.产品ts //生产环境中使用的配置
环境. ts //开发环境使用的配置我们按如下方式修改开发环境：
//environment . ts
导出常量环境={
基本Url:“”，
生产：假
};BaseUrl是发送请求时添加在请求前面的字段，它指向您想要请求的地址。我什么都没加。其实相当于加了http://localhost:4200。
添加拦截器
我们生成服务http-interceptor . service . ts interceptor服务，我们希望每个请求都经过这个服务。
//http-interceptor.service.ts
从“@angular/core”导入{ injective }；
导入{
HttpEvent，
HttpHandler，
HttpInterceptor，//拦截器
HttpRequest，//请求
}来自 @ angular/common/http ；
从“rxjs”导入{ Observable }；
从“rxjs/operators”导入{ tap }；
从“src/environments/environment”导入{ environment }；
@可注射({
providedIn:“根”
})
导出类HttpInterceptorService实现HttpInterceptor {
构造函数(){ }
intercept(req: HttpRequestany，next:HttpHandler):observable httpeventany {
let secure req:http requestany=req；
secureReq=secureReq.clone({
url: environment.baseUrl req.url
});
返回next.handle(secureReq)。管道(
点击(
(回应：任何)={
//处理响应的数据
console.log(响应)
},
(错误：任何)={
//处理错误的数据
console.log(错误)
}
)
)
}
}为了让拦截器生效，我们仍然需要注入：
//app.module.ts
从“@angular/common/http”导入{ HttpClientModule，HTTP _ INTERCEPTORS }；
//拦截器服务
从“”导入{ HttpInterceptorService }。/services/http-interceptor . service ；
提供商：[
//依赖注入
{
提供：HTTP _拦截器，
use class:HttpInterceptorService，
多：真的，
}
],验证
到目前为止，我们已经成功实现了拦截器。如果运行npm run dev，您将在控制台上看到以下信息：
为了验证您是否需要内容证书来访问内容，我在这里尝试使用[POST]https://jimmyarea.com/api/private/leave/message,的界面，得到了以下错误：
后端已经处理了这个接口，需要证书才能操作，所以直接报错401。
所以，问题来了。登录后，我们需要如何携带凭据？
如下，我们修改拦截器内容：
let secure req:http requestany=req；
//.
//使用localhost在请求标头上存储用户凭据。
if(window . local storage . getitem( ut ){
let token=window . local storage . getitem( ut )
secureReq=secureReq.clone({
头：req.headers.set(token ，token)
});
}
//.该凭证的有效期要求读者在进入系统时判断有效期是否有效，然后考虑重置localstorage的值，否则总是报错。这个也很简单，方便封装localstorage ~
[结束]
有关编程的更多信息，请访问：编程入门！这就是Angular拦截和封装请求的方式。更多详情请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。