HTTP拦截器

前面我们介绍了Angular 全家桶中 HTTP 部分的基础用法，能够满足开发中的基本需求。为了让我们的教程更贴近实战，拦截器是我们绕不过的话题。

拦截器可以用一种常规的、标准的方式对每一次 HTTP的请求/响应任务执行从认证到记日志等很多种隐式任务。
如果没有拦截机制，那么开发人员将不得不对每次 HttpClient调用显式实现这些任务。比如每次设置请求头中的 token。

编写拦截器

要实现拦截器，就要实现一个实现了 HttpInterceptor接口中的 intercept()方法的类。

生成一个 HeroInterceptor：

ng g interceptor http-study/interceptors/hero

默认代码长这样：

// hero.interceptor.ts
import { Injectable } from '@angular/core';
import {HttpRequest, HttpHandler, HttpEvent, HttpInterceptor} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class HeroInterceptor implements HttpInterceptor {
  constructor() {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return next.handle(request);
  }
}

上面代码中的 next对象表示拦截器链表中的下一个拦截器（在应用中可以设置多个拦截器）。

上面的 intercept()方法什么改动都没做，只是单纯的将请求转发给下一个拦截器（如果有），并最终返回 HTTP响应体的 Observable。

为了统一设置请求头，我们需要修改请求。但 HttpRequest和 HttpResponse实例的属性却是只读（readonly）的，所以修改前，我们需要先把它克隆一份，修改这个克隆体后再把它传给 next.handle()。

const copyReq = request.clone();

// hero.interceptor.ts
...
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  const copyReq = request.clone({
    // 跟上节在服务中设置请求头一致
    headers: request.headers.set('token', 'my-auth-token2').set('self-header', 'test2')
  });
  return next.handle(copyReq);
}

这种在克隆请求的同时设置新请求头的操作太常见了，因此它还有一个快捷方式 setHeaders：

const copyReq = request.clone({
  setHeaders: {
    token: 'my-auth-token2',
    'self-header': 'test2'
  }
});

拦截器也是一个由 Angular依赖注入 (DI)系统管理的服务，也必须先提供这个拦截器类，应用才能使用它。

由于拦截器是 HttpClient服务的依赖，所以必须在提供 HttpClient的同一个（或其各级父注入器）注入器中提供这些拦截器。

@NgModule({
  imports: [
    HttpClientModule
    // others...
  ],
  providers: [{ provide: HTTP_INTERCEPTORS, useClass: HeroInterceptor, multi: true }]
})

tips: multi: true选项会告诉 Angular``````HTTP_INTERCEPTORS是一个多重提供者的令牌，表示这个令牌可以注入多个拦截器。

删除我们原来在具体方法中设置的请求头，来验证拦截器是否设置成功。

大功告成，我们设置的第一个请求拦截器成功~

同时，我们还可以在响应体中设置统一的错误处理提示：

// hero.interceptor.ts
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  // ...
  return next.handle(copyReq).pipe(
    catchError(err => this.handleError(err))
  );
}
private handleError(error: HttpErrorResponse) {
  if (typeof error.error?.code === 'number') {
    console.error(`服务器端发生错误，状态码：${error.error.code}`);
  } else {
    console.error('请求失败');
  }
  return throwError(error);
}

这样一来，我们的请求服务中的代码就会简练很多。

多个拦截器

可能在应用中会有多个拦截器，这个时候，我们可以将所有的拦截器抽离成一个单独的文件，提供时，引入文件即可：

// interceptors/index.ts
import {HeroInterceptor} from '../http-study/interceptors/hero.interceptor';
import {HTTP_INTERCEPTORS} from '@angular/common/http';

export const httpInterceptorProviders = [
  { provide: HTTP_INTERCEPTORS, useClass: HeroInterceptor, multi: true },
];

依赖注入：

import {httpInterceptorProviders} from './http-study/interceptors';
...
providers: httpInterceptorProviders

Angular会按照提供它们的顺序应用这些拦截器。 如果提供拦截器的顺序是先 A，再 B，再 C，那么请求阶段的执行顺序就是 A->B->C，而响应阶段的执行顺序则是 C->B->A。

用拦截器记录日志

我们的每个请求都会通过拦截器，基于这个特点，我们可以用它来做日志的记录。

ng g interceptor http-study/interceptors/logging

创建一个服务用来记录日志：

ng g s http-study/services/logger

添加两个方法，分别用来存储日志与打印日志，当然，里面的逻辑你可以根据需求自己定义：

// logger.service.ts
export class LoggerService {
  logs: string[] = [];
  private log(msg: string): void {
    console.log(msg);
  }
  add(msg: string): void {
    this.logs.push(msg);
    this.log(msg);
  }
}

在 logging拦截器中注入 LoggerService并实现记录逻辑：

// logging.interceptor.ts
import { Observable } from 'rxjs';
import {LoggerService} from '../services/logger.service';
import {finalize, tap} from 'rxjs/operators';

@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
  constructor(private loggerServe: LoggerService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<any> {
    const startTime = Date.now(); // 记录请求开始时间
    let status: string; // 记录请求状态

    return next.handle(request)
      .pipe(
        tap(
          event => status = event instanceof HttpResponse ? 'succeeded' : '',
          error => status = 'failed'
        ),
        finalize(() => {
          const elapsedTime = Date.now() - startTime; // 请求最后结束时间
          const message = `${request.method} "${request.urlWithParams}" ${status} in ${elapsedTime} ms.`;
          this.loggerServe.add(message);
        })
      );
  }
}

RxJS的 tap操作符会捕获请求成功了还是失败了, finalize操作符无论在响应成功还是失败时都会调用，然后把结果汇报给 LoggerService。
这个拦截器不会对请求与相应做任何修改，原样发送给调用者。(最后别忘了提供这个拦截器)

最后我们的效果应该是这样的：

拦截器实现缓存

拦截器还可以自行处理请求，而不用转发给 next.handle()。利用这一点特性，我们可以做缓存请求和响应，以便提升性能。

创建一个 caching拦截器：

ng g interceptor http-study/interceptors/caching

在实现拦截器逻辑之前，我们先来定义一个 Caching接口：

// caching.ts
export interface Caching {
  get(req: HttpRequest<any>): HttpResponse<any> | nill;
  put(req: HttpRequest<any>, res: HttpResponse<any>): void;
}

get()方法用来获取 req请求对应的响应对象；
put()方法用于保存 req请求对应的响应对象。

另外，我们还需要定义一个 CachingEntry接口用来保存已缓存的响应对象。
同时定义一个常量用来设定缓存的有效期时间：

// caching.ts
export interface CachingEntry {
  url: string; // 被缓存的请求地址
  response: HttpResponse<any>; // 被缓存的响应对象
  entryTime: number; // 响应对象被缓存的时间，用于判断缓存是否过期
}
// 设置最长缓存时间为3s
export const MAX_CACHE_AGE = 3000;

现在，我们来实现一个 CachingService服务，用来实现我们 Caching接口：

ng g s http-study/services/caching

// caching.service.ts
import { Injectable } from '@angular/core';
import {Caching, CachingEntry, MAX_CACHE_AGE} from '../interfaces/caching';
import {HttpRequest, HttpResponse} from '@angular/common/http';
import {LoggerService} from './logger.service';

@Injectable()
export class CachingService implements Caching{
  // 定义一个map，用于保存缓存，key值是url
  cacheMap = new Map<string, CachingEntry>();
  // 注入开始的日志拦截器
  constructor(private loggerServe: LoggerService ) { }
  // 获取已缓存的响应体
  get(req: HttpRequest<any>): HttpResponse<any> | null {
    // 试图获取缓存
    const entry = this.cacheMap.get(req.urlWithParams);
    // 判断是否被缓存，如没有直接返回null
    if (!entry) { return null; }
    // 判断是否过期
    const isExpired = Date.now() - entry.entryTime > MAX_CACHE_AGE;
    // 添加日志
    this.loggerServe.add(`${req.urlWithParams} is Expired: ${isExpired}`);
    // 有缓存且未过期，返回响应体
    return isExpired ? null : entry.response;
  }
  // 添加缓存
  put(req: HttpRequest<any>, res: HttpResponse<any>): void {
    // 创建CachingEntry对象
    const entry: CachingEntry = {
      url: req.urlWithParams,
      response: res,
      entryTime: Date.now()
    };
    // 添加保存日志
    this.loggerServe.add(`Save ${entry.url} response into cache`);
    // 保存缓存
    this.cacheMap.set(entry.url, entry);
    // 删除过期缓存
    this.deleteExpiredCache();
  }
  private deleteExpiredCache(): void {
    this.cacheMap.forEach((entry: CachingEntry) => {
      if (Date.now() - entry.entryTime > MAX_CACHE_AGE) {
        this.cacheMap.delete(entry.url);
      }
    });
  }
}

万事俱备，只差实现 CachingInterceptor了。

// caching.interceptor.ts
@Injectable()
export class CachingInterceptor implements HttpInterceptor {
  // 首先注入CachingService服务
  constructor(private cachingServe: CachingService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 判定是否需要缓存，如不需要缓存，直接转给下一个拦截器
    if (!this.isCacheable(request)) {
      return next.handle(request);
    }
    // 获取缓存
    const cachingRes: HttpResponse<any> = this.cachingServe.get(request);
    // 如果有缓存，则直接返回一个缓存的Observable, 否则就需要发送请求，并将响应结果缓存
    return cachingRes ? of(cachingRes) : this.sendRequest(request, next);
  }

  private sendRequest(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      tap(event => {
        if (event instanceof HttpResponse) {
          this.cachingServe.put(req, event); // 更新缓存
        }
      })
    );
  }
  private isCacheable(req: HttpRequest<any>): boolean {
    // 这里简单判定了一下，可以根据自己需求去实际判断
    return req.method === 'GET';
  }
}

到此为止，我们就实现了 CachingInterceptor全部功能，记得提供这个拦截器。

从上面的效果可以看出，当我们第一次请求的时候缓存了相应结果，第二次是直接获取的缓存，当与第一请求间隔3s后，再次请求时，缓存已过期，所以就再次发送了请求。同时，从浏览器的 Network 中也能看到只发送了真正的两次请求。

用拦截器来请求多个值

HttpClient.get()方法通常会返回一个可观察对象，拦截器可以把它改成一个可以发出多个值的可观察对象。

我们在拦截器中加一段判定：

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  // ...
  // 先获得缓存
  if (request.headers.get('x-refresh')) {
    const results$ = this.sendRequest(request, next);
    return cachingRes ?
      results$.pipe( startWith(cachingRes) ) :
      results$;
  }
  // 缓存或者直接请求
  return cachingRes ? of(cachingRes) : this.sendRequest(request, next);
}

这样一来，如果没有缓存值，拦截器直接返回 results$，否则先将缓存的响应加入到 result$的管道中，使用重组后的可观察对象进行处理，并发出两次。先立即发出一次缓存的响应体，然后发出来自服务器的响应。

总结

1. cli工具生成拦截器是没有简写方式的，应该是 ng g interceptor xxx;
2. 拦截器请求顺序是按照配置顺序执行，响应拦截则是相反的顺序；
3. 用拦截器做请求缓存能优化性能，是个好东西；
4. 必须在提供 HttpClient的同一个（或其各级父注入器）注入器中提供拦截器。

欢迎关注我的公众号，公众号将第一时间更新angular教程：

许多页面在访问之前是需要登陆验证的，如果用户没有登录，则需要用户跳转到登陆页面进行登录。
结合自身练习以及资料进行整理，提供以下几种方式

一、Vue通过router实现登录拦截

1.requireAuth

requireAuth属性作用是表明该路由是否需要登陆验证，在进行全局拦截时，通过该属性进行判断，该属性包含在meta属性中。

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

routes=[
	{
		path:'/',
		name:'Default',
		redirect:'/home',
		component:Home,
		meta:{
			requireAuth:true //此时表示进入这个路由是需要登录的
		}
	},
	{
		name:'login',
		path:'/login'
	}
]

2.router.beforeEach

beforeEach时router的钩子函数，该函数在进入每个网页之前调用，该函数接收三个参数：
①from：即将离开的路由
②to：即将要跳转的路由
③next：跳转方法，在beforeEach函数中作为结束语句调用，以实现页面跳转。
next(false)：中断当前的导航。如果浏览器的url改变了(可能是手动或浏览器按钮后退)，那么url地址会重置到from路由对应的地址。
next(’/’)或者next({path:’/’})：跳转到一个不同的地址。当前导航被中断，然后进行一个新的导航。

要确保next方法被调用，否则钩子就不会被resolved

router.beforeEach((from,to,next)=>{
	if(to.meta.requireAuth){//判断跳转的路由是否需要登录，如果前端没有登录信息则直接拦截，如果有则判断后端是否正常登录（防止构造参数绕过）
		if(store.state.token){//vuex.state判断token是否存在 即是否有用户登录
			next()//已登录进行跳转
		}}else{
			next({
				path:'/login',
				query:{redirect:to.fullPath}//将跳转的路由path作为参数，登陆成功后跳转到该路由，这里的to.fullPath是带的一个参数传给登陆页面，登录之后要跳转的路由
			})
		}
	}else{
		next()
	}
}

登陆完成后，在登陆中改变vuex的状态

	login () {
        var _this = this
        this.$axios.post('/login', {
          username: this.loginForm.username,
          password: this.loginForm.password
        }).then(resp => {
          if (resp.data.code === 200) {
            var data = resp.data
            _this.$store.commit('login', data)
            var path = _this.$route.query.redirect
            _this.$router.replace({path: path === '/' || path === undefined ? '/admin/dashboard' : path})
          } else {
            this.$alert(resp.data.data, '提示', {
              confirmButtonText: '确定'
            })
          }
        }).catch(failResponse => {
        })
      }

二、拦截器(通过使用axios拦截器)

如果要统一处理所有的http请求和响应，就需要使用axios的拦截器。通过配置http response inteceptor，当后端接口返回错误信息，让用户重新登陆

// http request 拦截器
axios.interceptors.request.use(
    config => {
        if (store.state.token) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
            config.headers.Authorization = `token ${store.state.token}`;
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    });

// http response 拦截器
axios.interceptors.response.use(
  response => {
    return response
  },
  error => {
    if (error) {
      store.commit('logout')
      router.replace('/login')
    }
    // 返回接口返回的错误信息
    return Promise.reject(error)
  })

三、http拦截

这里引入的element ui框架，结合element中loading和message组件来处理的。可以单独建立一个http的js文件处理axios，再到main.js中引入。

/**
 * http配置
 */
// 引入axios以及element ui中的loading和message组件
import axios from 'axios'
import { Loading, Message } from 'element-ui'
// 超时时间
axios.defaults.timeout = 5000
// http请求拦截器
var loadinginstace
axios.interceptors.request.use(config => {
 // element ui Loading方法
 loadinginstace = Loading.service({ fullscreen: true })
 return config
}, error => {
 loadinginstace.close()
 Message.error({
 message: '加载超时'
 })
 return Promise.reject(error)
})
// http响应拦截器
axios.interceptors.response.use(data => {// 响应成功关闭loading
 loadinginstace.close()
 return data
}, error => {
 loadinginstace.close()
 Message.error({
 message: '加载失败'
 })
 return Promise.reject(error)
})
 
export default axios

Http拦截器就是拦截发出的请求，对其进行统一添加额外处理，然后放行；
对响应进行拦截并作出业务上的判断，决定是否给与返回
1.定义req.interceptor.ts文件(以‘.interceptor.ts’作为后缀)

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpEvent, HttpHandler, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
const ignoreToken = ['login', 'logout', 'table'];
@Injectable()
export class CommonInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    //请求拦截
    console.log(req);
    return next.handle(req).pipe(
      tap(
        //响应拦截
        event => {
          console.log(event);
          if (event instanceof HttpResponse) {
            if (event.status >= 500) {
              // 跳转错误页面
            }
          }
        },
        error => {
          console.log(error);
          // token过期 服务器错误等处理
        })
    );
  }
}

2.注入在app模块，在providers数组种添加

 { 
 	provide: HTTP_INTERCEPTORS, 
 	useClass: CommonInterceptor, //自定义拦截器的类名
 	multi: true //这是必须的，因为它会告诉 Angular 这个 HTTP_INTERCEPTORS 表示的是一个数组，而不是单个的值。
 }

3.运行结果

请求拦截:

响应拦截