AngularJS - http 拦截器 - 令牌刷新后重新发送所有请求

AngularJS

AngularJS - http 拦截器 - 令牌刷新后重新发送所有请求

在使用AngularJS开发Web应用程序时，我们经常需要与后端服务器进行HTTP通信。在这个过程中，我们可能会遇到一个常见的问题，即在用户的令牌（token）过期后，需要重新登录获取新的令牌。为了解决这个问题，我们可以使用AngularJS的HTTP拦截器来拦截所有发出的HTTP请求，并在令牌过期时重新发送请求。

HTTP拦截器

HTTP拦截器是AngularJS提供的一种功能强大的机制，用于在HTTP请求和响应之间添加自定义逻辑。通过使用HTTP拦截器，我们可以在发送请求之前或收到响应之后修改请求或响应的数据。

在我们的情况下，我们可以使用HTTP拦截器来检查每个发出的HTTP请求是否返回了令牌过期的错误。如果是这种情况，我们可以使用刷新令牌的API来获取新的令牌，并重新发送原始请求。

案例代码

以下是一个简单的示例代码，展示了如何使用AngularJS的HTTP拦截器来重新发送所有请求。

Javascript
// 创建AngularJS模块
var app = angular.module('myApp', []);
// 注册HTTP拦截器
app.factory('tokenInterceptor', ['$q', '$injector', function ($q, $injector) {
  var tokenInterceptor = {
    request: function (config) {
      // 检查令牌是否过期
      if (tokenExpired) {
        var $http = $injector.get('$http');
        
        // 刷新令牌
        return $http.get('/refresh-token').then(function (response) {
          // 更新令牌
          var newToken = response.data.token;
          config.headers.Authorization = 'Bearer ' + newToken;
          
          // 重新发送原始请求
          return $http(config);
        }, function (error) {
          // 处理刷新令牌失败的情况
          return $q.reject(error);
        });
      }
      
      return config;
    }
  };
  
  return tokenInterceptor;
}]);
// 配置HTTP拦截器
app.config(['$httpProvider', function ($httpProvider) {
  $httpProvider.interceptors.push('tokenInterceptor');
}]);
// 控制器
app.controller('myController', ['$http', function ($http) {
  // 发送HTTP请求
  $http.get('/api/data').then(function (response) {
    // 处理响应数据
  }, function (error) {
    // 处理错误
  });
}]);

拦截器逻辑解析

上述代码中，我们首先创建了一个AngularJS模块，并注册了一个名为tokenInterceptor的工厂函数。在tokenInterceptor中，我们定义了一个request方法，用于检查令牌是否过期。

当发出一个HTTP请求时，AngularJS会调用request方法。在request方法中，我们首先检查令牌是否过期，如果过期了，我们使用$http服务来发送一个刷新令牌的请求。如果刷新令牌成功，我们将新的令牌添加到请求的头部，并重新发送原始请求。如果刷新令牌失败，我们将拒绝原始请求的Promise。

最后，我们在应用程序的配置中将tokenInterceptor添加到$httpProvider的拦截器数组中，以便在任何HTTP请求中都能使用该拦截器。

通过使用AngularJS的HTTP拦截器，我们可以在令牌过期后重新发送所有请求，而不需要手动处理每个请求的过期问题。这种方法能够提高代码的可维护性和可重用性，并提供更好的用户体验。