首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular 6 HttpInterceptor -当获取401时,刷新令牌并创建相同的请求

Angular 6 HttpInterceptor是Angular框架中的一个特性,用于拦截HTTP请求和响应。当我们需要在请求或响应发生时执行一些额外的操作时,可以使用HttpInterceptor来实现。

在特定的场景中,当我们的请求返回401未授权错误时,我们可能需要刷新令牌并重新发送相同的请求。为了实现这个功能,我们可以创建一个自定义的HttpInterceptor,并在其中处理401错误。

下面是一个示例的Angular 6 HttpInterceptor代码:

代码语言:typescript
复制
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

  constructor(private authService: AuthService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 在每个请求的header中添加认证令牌
    const token = this.authService.getToken();
    if (token) {
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${token}`
        }
      });
    }

    return next.handle(request).pipe(
      catchError(error => {
        if (error.status === 401) {
          // 处理401错误,刷新令牌并重新发送相同的请求
          return this.authService.refreshToken().pipe(
            switchMap(newToken => {
              // 更新认证令牌
              this.authService.setToken(newToken);

              // 克隆原始请求并添加新的认证令牌
              const newRequest = request.clone({
                setHeaders: {
                  Authorization: `Bearer ${newToken}`
                }
              });

              // 重新发送请求
              return next.handle(newRequest);
            }),
            catchError(refreshError => {
              // 刷新令牌失败,重定向到登录页面或执行其他操作
              return throwError(refreshError);
            })
          );
        } else {
          // 处理其他错误
          return throwError(error);
        }
      })
    );
  }
}

在上述代码中,我们创建了一个名为TokenInterceptor的HttpInterceptor类。在intercept方法中,我们首先从AuthService中获取认证令牌,并将其添加到请求的header中。然后,我们使用next.handle方法来继续处理请求。

如果请求返回401错误,我们会调用AuthService中的refreshToken方法来刷新令牌。在刷新令牌成功后,我们会更新认证令牌并克隆原始请求,并在新的请求中添加新的认证令牌。最后,我们使用next.handle方法来重新发送新的请求。

如果刷新令牌失败,我们可以选择重定向到登录页面或执行其他操作。

这是一个简单的示例,你可以根据自己的需求进行修改和扩展。在实际应用中,你可能需要根据具体的业务逻辑来处理401错误和刷新令牌的逻辑。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)、腾讯云对象存储(COS)、腾讯云数据库MySQL版等。你可以通过访问腾讯云官网(https://cloud.tencent.com/)获取更多关于这些产品的详细信息和文档。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 从入坑到挖坑 - HTTP 请求概览

在使用之前,首先需要在应用根模块中,引入 HttpClientModule 模块,添加到 imports 数组中 import { BrowserModule } from '@angular/platform-browser...在项目中创建一个接口,按照后端返回数据信息进行属性定义,用来映射请求响应信息(Angular 只能将请求响应对象转换成接口类型,不能自动转换成类实例) ng g interface interfaces...4.1.3、提交数据到服务端 在同后端接口进行交互时,获取数据一般用是 get 请求,而进行数据新增、更新、删除时则会使用 post、put、delete 这三个 HTTP 谓词 在毒鸡汤这个接口中...因为这里是以默认表单提交方式进行数据提交,后端需要修改请求 body 格式时,则需要我们修改请求 MIME 类型 需要更改请求 MIME 类型或是需要添加授权访问 token 信息这一类操作时...,从而不需要在后续业务逻辑代码中再进行判断请求是否成功 4.3.1、自定义拦截器 在 Angular 中可以新建一个继承于 HttpInterceptor 接口拦截器类,通过实现 intercept

5.3K10
  • AngularJs HTTP响应拦截器实现登陆、权限校验

    $httpProvider 中有一个 interceptors 数组,而所谓拦截器只是一个简单注册到了该数组中常规服务工厂。下面的例子告诉你怎么创建一个拦截器: <!...请求异常拦截器会俘获那些被上一个请求拦截器中断请求。它可以用来恢复请求或者有时可以用来撤销请求之前所做配置,比如说关闭进度条,激活按钮和输入框什么之类。...angular.module("myApp", []) .factory('httpInterceptor', [ '$q', '$injector',function($q, $injector...return $q.reject(config); } } return httpInterceptor; } 因此,我们可以通过拦截器来判断用于登陆与权限问题...,如果 $rootScope.user = {token:""}; // 全局事件,方便其他view获取该事件,给以相应提示或处理

    2.2K90

    JSON Web Token(JWT)教程:一个基于Laravel和AngularJS例子

    跨源请求共享(CORS):使用AJAX调用从另一个域(跨域,Cross-origin)获取资源时,我们可能会遇到禁止请求问题,因为默认情况下,HTTP请求不包括跨域(Cross-origin)请求...可重用性:我们可以拥有许多独立服务器,在多个平台和域(domains)上运行,重复使用相同令牌来验证用户。很容易构建与其他应用程序共享权限应用程序。...我们通常会创建专门控制器来处理我们所有的HTTP请求保持我们代码模块化和干净。...在进行AJAX调用时,要获得一些视觉反馈,我们将使用angular-loading-bar script来拦截XHR请求创建一个加载栏。 ...还有很多关于JWT内容,例如如何处理安全细节,以及在token过期时刷新令牌,但上述示例应演示使用JSON Web Token基本用法,更重要是显示优势。

    30.6K10

    Angular SSR 探究

    创建服务端应用只需要一个命令:ng add @nguniversal/express-engine重要建议在运行该命令之前先提交所有的改动。...例如,在浏览器中,我们通过 window.location.href 获取当前浏览器地址,而改成 SSR 之后,代码如下:import { Location } from '@angular/common..._document.getElementById('fox-container'); }}使用 URL 绝对地址在 Angular SSR 应用中,HTTP 请求 URL 地址必须为 绝对地址(即,...Angular 官方推荐将请求 URL 全路径设置到 renderModule() 或 renderModuleFactory() options 参数中。...这是因为 Angular 使用了动态路由,比如 /product/:id 这种路由,而页面的渲染结果要经过 JS 执行才能知道,因此,Angular 使用了 Express 作为 Web 服务器,能在服务端运行时根据用户请求

    10.3K51

    【Hybrid开发高级系列】AngularJS(二)——常用$服务

    rootScope是由angularJS加载模块时候自动创建,每个模块只会有1个rootScope。rootScope创建好会以服务形式加入到 injector中。...令牌cookie名称     transformRequest: 函数或者函数数组,用来对http请求请求体和头信息进行转换,返回转换后结果。     ...我们可以利用路由服务定义这样一种东西:对于浏览器所指向特定URL,Angular将会加载显示一个模板,实例化一个控制器来为模板提供内容。         ...暴露当前地址栏URL,这样你就能         * 获取监听URL。         * 改变URL。     ...path( ):读、写;没有任何参数时,返回当前url路径;带有参数时,改变路径,返回$location。

    42040

    从0开始构建一个Oauth2Server服务 单页应用

    代码本身是从授权服务器获得,用户可以在授权服务器上看到客户端请求信息,批准或拒绝该请求。 Web 流程第一步是向用户请求授权。这是通过创建授权请求链接供用户单击来实现。...用户被带到服务看到请求后,他们将允许或拒绝该请求。如果他们允许请求,他们将被重定向回指定重定向 URL 以及查询字符串中授权代码。然后,应用程序需要将此授权码交换为访问令牌。...redirect_uri(可选) 如果重定向 URL 包含在初始授权请求中,则它也必须包含在令牌请求中,并且必须相同。有些服务支持注册多个重定向 URL,有些服务需要在每个请求中指定重定向 URL。...这在当时是有道理,因为众所周知,隐式流安全性较低,并且如果没有客户端密钥,刷新令牌可以无限期地用于获取访问令牌,因此这比泄漏风险更大访问令牌。...也几乎不需要刷新令牌,因为 JavaScript 应用程序只会在用户积极使用浏览器时运行,因此它们可以在需要时重定向到授权服务器以获取访问令牌

    21230

    Spring OAuth2 实现始终获取令牌

    ) refreshAccessToken:根据刷新令牌(refresh_token)来获取一个全新请求令牌(access_token) revokeToken:撤销令牌,删除用户生成请求令牌(access_token...#enhance处理后刷新令牌会被重新创建替换(这个地方貌似是一个Bug)。...grant_type=refresh_token)重新获取一次新(有效期为2个小时)请求令牌刷新令牌(refresh_token)失效后,再次通过createAccessToken方法来获取令牌。...true,表示默认情况下刷新令牌(refresh_token)是可以重复使用,一般刷新令牌过期时间都比较久,请求令牌(access_token)失效后根据刷新令牌进行获取有效请求令牌。...,但是令牌有效期不会相互影响,第一次刷新使用是第一次获取刷新令牌,这样其实也就是刷新第一次请求令牌,与第二次无关!!!

    2.1K20

    AngularDart4.0 指南- 依赖注入 顶

    只要你尝试测试这个组件或从远程服务器获取英雄,你就必须改变HeroListComponent实现,替换mockHeroes数据每一个其他用途。...服务类公开了一个getHeroes()方法,该方法返回与之前相同模拟数据。 当然,这不是一个真正数据服务。 如果服务实际上从远程服务器获取数据,则getHeroes()方法签名将是异步。...组件子注入器 例如,Angular创建一个具有@Component.providers组件新实例时,它也为该实例创建一个新子注入器。...组件注入器是相互独立,每个组件都创建它自己组件提供服务实例。 Angular销毁这些组件之一实例时,它也会销毁该组件注入器和注入器服务实例。...注入器维护一个内部令牌提供者映射,它被要求依赖时候它会引用它。 令牌是mapkey。 在之前所有例子中,依赖性值都是一个类实例,类类型作为自己查找键。

    5.7K20

    从0开始构建一个Oauth2Server服务 发起认证请求

    事实上,尝试解码访问令牌是危险,因为服务器不保证访问令牌将始终保持相同格式。下次您从该服务获取访问令牌时,完全有可能采用不同格式。...Refresh Tokens 您最初收到访问令牌时,它可能包含刷新令牌以及过期时间,如下例所示。...这对于没有客户端密钥客户端尤其重要,因为刷新令牌成为获取新访问令牌所需唯一东西。...刷新令牌在每次使用后发生变化时,如果授权服务器检测到刷新令牌被使用了两次,则意味着它可能已被复制被Attack者使用,授权服务器可以撤销所有访问令牌和相关刷新令牌立即使用它。...这就是应用程序是否知道刷新令牌预期寿命无关紧要原因,因为无论它过期原因如何,结果总是相同

    18630

    分享一篇详尽关于如何在 JavaScript 中实现刷新令牌指南

    刷新令牌具有较长生命周期,用于在原始访问令牌过期后获取访问令牌访问令牌过期时,客户端将刷新令牌发送到服务器,然后服务器验证刷新令牌生成新访问令牌。...然后,资源服务器可以解码令牌以验证用户身份授权访问受保护资源。 JWT 用作刷新令牌时,它通常使用指示当前访问令牌过期时间声明进行编码。...客户端将令牌存储在本地存储中或作为仅 HTTP 安全 cookie。 客户端在每个访问受保护资源请求中发送访问令牌访问令牌过期时,客户端将刷新令牌发送到认证服务器以获取访问令牌。...该脚本首先向令牌端点发出初始请求获取访问令牌刷新令牌。然后,对访问令牌进行解码以获取过期时间,并在向受保护端点发出请求之前检查该过期时间。...如果访问令牌已过期,脚本将使用刷新令牌获取访问令牌,然后重试原始请求

    33330

    微服务架构如何保证安全性?

    图2  FTGO 应用程序客户端发出登录请求时,登录处理程序会对用户进行身份验证,初始化会话用户信息,返回会话令牌 cookie,以便安全地识别会话。...接下来,客户端发出包含会话令牌请求时,SessionBasedSecurityInterceptor 从指定会话中检索用户信息建立安全上下文。...6请求处理程序使用安全上下文来获取其身份,借此确定是否允许用户执行请求操作。 FTGO 应用程序使用基于角色授权。...服务使用令牌验证请求获取有关主体信息。API Gateway 还可以为面向会话客户端提供相同令牌,以用作会话令牌。 客户端事件序列如下: 1....客户端在向 API Gateway 发出请求中包含访问令牌刷新令牌6.

    5.1K40

    如何在微服务架构中实现安全性?

    图2  FTGO 应用程序客户端发出登录请求时,登录处理程序会对用户进行身份验证,初始化会话用户信息,返回会话令牌 cookie,以便安全地识别会话。...接下来,客户端发出包含会话令牌请求时,SessionBasedSecurityInterceptor 从指定会话中检索用户信息建立安全上下文。...6请求处理程序使用安全上下文来获取其身份,借此确定是否允许用户执行请求操作。 FTGO 应用程序使用基于角色授权。...服务使用令牌验证请求获取有关主体信息。API Gateway 还可以为面向会话客户端提供相同令牌,以用作会话令牌。...客户端在向 API Gateway 发出请求中包含访问令牌刷新令牌6.

    4.9K30

    【AngularJS】—— 13 服务Service

    本篇文章会介绍一下内容:   1 $http这种Angular提供服务使用   2 如何自定义服务,总结服务需要注意几个小点。   ...本文采用factory形式,仍然是先创建一个模块,在模块基础上创建一个Service: var myAppModule = angular.module("myApp",[]);...username属性变化时,会触发请求方法。   控制器多注入了一个$timeout变量,该变量用于控制输入时间。....),350);输入间隔超过350ms时,就会触发相应函数function(...)。这样可以有效防止,不停刷新请求,造成网页刷新抖动。   ...在函数内部,调用了我们自己服务提供userList方法。请求成功时,绑定返回值到users中。users会动态刷新内容。   查看程序演示结果: ?

    1.4K50

    OAuth2.0 OpenID Connect 一

    您有一个应用程序直接与后端对话以获取没有中间件令牌时,此流程很有用。它不支持长期会话。access_token``id_token 混合流以不同组合结合了上述两者——任何对用例有意义东西。...2012 年发布OAuth 2.0 规范时,它定义了令牌类型(例如访问和刷新令牌),但它有意避免规定这些令牌格式。 2015 年,JWT 规范发布。它提议创建对其他信息进行编码令牌。...然而,许多 OAuth 2.0 实施者看到了 JWT 好处,开始将它们用作(或两者)访问和刷新令牌。 OIDC 正式规定了 JWT 在强制 ID 令牌成为 JWT 方面的作用。...这是一个典型场景: 用户登录取回访问令牌刷新令牌 应用程序检测到访问令牌已过期 应用程序使用刷新令牌获取访问令牌 重复 2 和 3,直到刷新令牌过期 刷新令牌过期后,用户必须重新进行身份验证...这是一个快速参考: ID token 携带在 token 本身编码身份信息,必须是 JWT 访问令牌用于通过将资源用作不记名令牌获取对资源访问权限 刷新令牌存在仅仅是为了获得更多访问令牌

    43530

    学成在线-第16天-讲义- Spring Security Oauth2 JWT RSA加解密

    需要访问第三方系统资源时需要首先通过第三方系统认证(例如:微信认证),由第三方系统对用户认证通过,授权资源访问权限。...黑马程序员网站携带令牌请求访问微信服务器获取用户基本信息。 6、资源服务器返回受保护资源 资源服务器校验令牌合法性,如果合法则向用户响应资源信息内容。...4、认证服务器向客户端响应令牌 5、客户端请求资源服务器资源,资源服务校验令牌合法性,完成授权 6、资源服务器返回受保护资源 3.3.2 申请授权码 请求认证服务获取授权码: Get请求: localhost...,根据令牌获取用户相关信息,性能低下。 ​...1、AuthToken 创建 AuthToken模型类,存储申请令牌,包括身份令牌刷新令牌、jwt令牌 身份令牌:用于校验用户是否认证 刷新令牌:jwt令牌快过期时执行刷新令牌 jwt令牌:用于授权

    11.9K10

    OAuth 详解 什么是 OAuth?

    另一个令牌刷新令牌。这要长得多;天,月,年。这可用于获取令牌。要获得刷新令牌,应用程序通常需要经过身份验证机密客户端。 刷新令牌可以被撤销。...在仪表板中撤销应用程序访问权限时,您正在终止其刷新令牌。这使您能够强制客户端轮换机密。您正在做是使用刷新令牌获取访问令牌,并且访问令牌通过网络访问所有 API 资源。...您可以使用访问令牌来访问 API。一旦它过期,您将必须使用刷新令牌返回到令牌端点以获取访问令牌。 缺点是这会引起很多开发人员摩擦。OAuth 对开发人员来说最大痛点之一是您必须管理刷新令牌。...您可以被动或主动使用令牌。主动是在你客户中有一个计时器。反应式是捕获错误尝试获取令牌。...它通常不支持刷新令牌,并且假定资源所有者和公共客户端在同一台设备上。您有一个只想使用 OAuth API,但您有老派客户要处理时。

    4.5K20
    领券