什么是 Angular HTTP 拦截器
Angular 中提供了 HTTP 拦截器,可以在发送请求前和处理响应后对请求和响应进行拦截、处理和修改。通过 HTTP 拦截器,我们可以实现一些非常有用的功能,比如给每个请求加上请求头、修改响应结果或实现自动登录等功能。
如何使用拦截器
Angular 自带了一个 HttpClient
模块,我们可以使用该模块来发送 HTTP 请求。通过给 HttpClient
配置 HTTPInterceptors
,我们可以将拦截器应用到所有的请求中。
一个最简单的拦截器示例代码如下:
------ - ---------- - ---- ---------------- ------ - ---------------- ------------ ----------- - ---- ----------------------- ------------- ------ ----- ----------------- ---------- --------------- - -------------- ----------------- ----- ------------ - --------------------------- ------ ----------------- - -
上面的代码定义了一个简单的拦截器,每次请求都会在控制台输出一个日志信息。在 Angular 的 @NgModule
中,我们可以将该拦截器加入到 HTTP_INTERCEPTORS
中,如下所示:
------ - ------------- - ---- ---------------------------- ------ - -------- - ---- ---------------- ------ - ----------------- ----------------- - ---- ----------------------- ------ - ------------ - ---- ------------------ ------ - ----------------- - ---- ----------------------- ----------- ------------- - ------------ -- -------- - -------------- ---------------- -- ---------- - - -------- ------------------ --------- ------------------ ------ ---- - -- ---------- -------------- -- ------ ----- --------- - -
这样我们就成功为所有的 HTTP 请求添加了一个拦截器。
实现自动登录
在实际开发中,我们经常会遇到需要在用户登录后,保持用户状态不过期直到用户手动退出登录的需求。此时,我们可以使用 HTTP 拦截器来实现自动登录功能。每次用户发出的请求都会被拦截,如果用户的登录状态失效,拦截器会自动为用户重新登录。
下面的示例代码演示了如何通过拦截器来实现自动登录:
------ - ---------- - ---- ---------------- ------ - ---------------- ------------ ------------ ----------------- - ---- ----------------------- ------ - ---------- - ---- ----------------- ------ - ---------- - ---- ------- ------ - ----------- - ---- ----------------- ------------- ------ ----- --------------- ---------- --------------- - ------------------- ------------ ------------ -- -------------- ----------------- ----- ------------ - ----- ----- - ---------------------------- -- ------- - ----- ------- - ----------- ----------- - -------------- ------- --------- - --- ------ -------------------------- ------------------ ------------------ -- - -- ------------- --- ---- - ------ ------------------------------ ------------ -- - ----- -------- - ---------------------------- ----- ---------- - ----------- ----------- - -------------- ------- ------------ - --- ------ ------------------------ --- ---------------- -- - ------ ---------------- -- -- - ---- - ------ ------------------ - -- -- - ------ ----------------- - -
上面的代码通过 setHeaders
将用户的 token 添加到请求头中,同时通过 catchError
捕捉所有的 HTTP 错误。如果拦截器检测到用户的登录状态失效,它将调用 AuthService
的 login
方法进行重新登录,并把新的 token 添加到请求头中重新发送请求。如果重新登录失败,则拦截器会让请求发生错误。
在 Angular 的 @NgModule
中,我们可以将 AuthInterceptor
拦截器加入到 HTTP_INTERCEPTORS
中,如下所示:
------ - ------------- - ---- ---------------------------- ------ - -------- - ---- ---------------- ------ - ----------------- ----------------- - ---- ----------------------- ------ - ------------ - ---- ------------------ ------ - ----------------- - ---- ----------------------- ------ - --------------- - ---- --------------------- ----------- ------------- - ------------ -- -------- - -------------- ---------------- -- ---------- - - -------- ------------------ --------- ------------------ ------ ---- -- - -------- ------------------ --------- ---------------- ------ ---- - -- ---------- -------------- -- ------ ----- --------- - -
总结
通过 Angular 的 HTTP 拦截器,我们可以轻松地为请求和响应添加、修改、处理信息,比如添加请求头、处理错误等。利用拦截器,我们可以实现一些非常实用的功能,比如实现自动登录等。
拦截器是 Angular 开发中很重要的一个概念,相信本文对大家的学习和实际开发都有很大的帮助。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6496e91048841e98944172cb