Question

我有一个Angular模板。在app.js中我有这个配置：

app.config(function ($routeProvider, $httpProvider) {
$httpProvider.interceptors.push('AuthInterceptor');

$routeProvider
.when('/', { .....etc

AuthInterceptor就是这个工厂：

'use strict';

app.factory('AuthInterceptor', function ($rootScope, $q, $window, $location) {
return {
  request: function (config) {
    config.headers = config.headers || {};
    if ($window.localStorage.token) {
      config.headers.Authorization = 'Token ' + $window.localStorage.token;
    }
    return config;
  },

  responseError: function (response) {
    if (response.status === 401) {
      $window.localStorage.removeItem('token');
      $window.localStorage.removeItem('email');
      $location.path('/');
      return;
    }
    return $q.reject(response);
  }
};
});

它究竟做了什么？

Answer 1

顾名思义，

Angular中的拦截器是框架提供的一种简单方法，可以在将应用程序的http请求发送到服务器之前在全局范围内进行拦截和修改。确实非常方便，它使我们能够配置身份验证令牌，添加请求日志，添加应用程序可能需要的自定义标头等等。

对于每个HTTP请求/响应，拦截器可以以常规的标准方式执行各种隐式任务，从身份验证到日志记录。如果没有拦截，开发人员将必须为每个HttpClient方法调用显式实现这些任务。

@Injectable()
    export class RequestLogInterceptor implements HttpInterceptor {
      intercept(
        request: HttpRequest<any>, next: HttpHandler
      ) : Observable<HttpEvent<any>> {
        console.log(request.url);
        return next.handle(request);
      }
    }

intercept方法将每个请求转换为Observable，随后将通过调用next.handle（）对其进行解析。因此，对于我们的实现来说，这非常简单：您接收请求，记录其url并调用next.handle（）将该请求发送到服务器，而无需对其进行任何更改。

Answer 2

“AuthInterceptor”将在headers.Authorization参数中为其前面的每个请求注入一个令牌。这将允许您在服务器端保留logedIn，或检查令牌是否存在并允许某些休息功能。

什么是角度的身份验证拦截器

2 个答案: