基于前后端分离的Web应用在处理权限校验方面使用JWT是常用的方式， 如何延长Token的寿命则是这种方式必须要解决的问题。 本文主要介绍在Angular应用种如何自动刷新Token，实现Token寿命无感知延续。
Angular 实现自动刷新Token主要利用 HttpInterceptor. 这是一个Interface， 它提供了一个Intercept() 方法， 我们实现Token自动刷新的核心思路就是在这个连接器里面判断如果Token需要被刷新就先hold住原来的API请求并且先去请求获取Token的API, 当拿到新的Token之后继续发起前面挂起的API请求。
如上图所示， 我们接下来要实现的所有功能都将在 Http Intercepotr 里面实现， 具体步骤如下。
1. 确定刷新token的周期
与后端同志们约定好Token失效时间以及何时刷新token的规则。比如说我们设置token过期时间为10分钟，那我们刷新token的时间首先就必须要小于10分钟（Refresh Token API 本身也是需要auth验证的，如果token过期将直接请求失败），而设置的刷新token的时间与token过期时间太接近也可能存在问题，有可能由于网络开销导致发送到后端的时候也已经过期。所以我们可以考虑约定5分钟为刷新token的周期。
2. Token解析与存储
对于不了解JWT 的同学可以自行查看相关资料，这里不做太多描述。 我们只需要知道登录成功之后返回的token里面有我们需要的两个值—— token生成时间和过期时间。
interface JWT {
sub: string;
iat: number; // Token 生成时间戳
exp: number； // Token 过期时间戳
}
当登录成功拿到token之后，我们除了要将token保存到storage种（localStorage 或者 sessionStorage）， 还要同时在storage里面标记拿到token的时间 tokenLastModify, 这个值将用于我们在将来在拦截器里面检查是否需要刷新token的逻辑中使用到。
3. Http Intercepotr 实现
前面说了那么多只是准备工作，接下来将具体介绍拦截器的具体实现。
- 创建一个拦截器，并注入到AppModule 中
refresh-token.interceptor.service.ts
```
export RefreshTokenInterceptor implements HttpIntercetpor {
constructor () {}
...
intercept(req: HttpRequest, next: HttpHandler): Observable> { return next.handle(req); }
}
```
app.module.ts
```
{ provide: HTTP_INTERCEPTORS, useClass: RefreshTokenInterceptor, multi: true },
```
- 实现intercept 方法如下
```
intercept(req: HttpRequest, next: HttpHandler): Observable> {
const { url } = req;
if (this.shouldRefreshToken && isNotRefreshTokenApi) { // refres token的API 不需要这个逻辑，直接请求就可以了，否则循环调用 refresh token API。
if (!this.refreshTokenInProgress) { //refreshTokenInProgress ： 这个变量用于标记当前是否有获取token的动作在进行中，当这个值为true 的时候其他的API将不会重复请求refresh token
this.refreshTokenInProgress = true;
this.refreshTokenSubject.next(null); // refreshTokenSubject 置空，拦截当前请求；
// 重新获取token，得到新的token之后, 使用新token发送原始请求。
return this.refreshToken().pipe(
switchMap((resp) => {
this.storageService.setStorage({ // 跟新storage
... resp,
tokenLastModify: new Date().getTime(), // 更新token刷新时间。
});
this.refreshTokenSubject.next(resp.token); // refreshTokenSubject返回非null 值， 放行其他的API
return next.handle(this.injectTOken(req)); // injectTOken() 方法实现替换新token， 这里将使用新token发送原始请求
})，
catchError(errorRes => this.handlError(errorRes)),
finalize(() => {
this.refreshTokenInProgress = false; // 最终必须要还原 refreshTokenInProgress状态，否则会阻止后面的请求通过。
})
)
} else {
return this.refreshTokenSubject.pipe(
fileter(result => result !== null), // 这个过滤器就实现当有请求token的进程发生，挂起其他请求的作用。
take(1),
switchMap(() => {
return next.handle(this.injectToken(req));
})
)
}
} else {
return next.handle(req);
}
}
```
上面的代码主要利用 创建了个 rxjs 属性 refreshTokenSubject 来实现我们控制请求是挂起还是继续。当一个请求进入拦截器，被判断为需要刷新token，我们利用 refreshTokenSubject.next(null) 来阻止后面的其他http请求被真正发出（其他的API 会进入下面的 else 条件中，进而被 fileter(result => result !== null) 过滤掉，不执行 next.handle()方法）， 而当前的这次请求会先请求刷新token的API， 当拿到新的token 存入storage并跟新获得token的时间戳，在token更新之后 执行 this.refreshTokenSubject.next(resp.token)，可以告知其他的API token已经刷新 ，其他的API 就会使用新token 继续之前的请求。最终，当前的请求会通过 return next.handle(this.injectTOken(req))带上新token真正发送Http请求。
refreshTokenSubject 声明如下
refresh-token.interceptor.service.ts
```
export RefreshTokenInterceptor implements HttpIntercetpor {
private refreshTokenInProgress = false;
private refreshTokenSubject: Subject<any> = new BehaviorSubject<any>(null);
}
```
shouldRefreshToken 的实现：
```
get shouldRefreshToken() {
const token = localStorage.getItem('token');
if (token) {
const tokenObj = JSON.parse(atob(token.splice('.')[1]));
const maxAge = (tokenObj.exp - tokenObj.iat) * 1000 - 3000; // 生命周期 - 3秒，留点buffer，避免 token太小的极端情况导致过期。
const shift = Math.floor(maxAge / 2); // 刷新token时间设定为token过期时间的一半
const lastModify = localStorage.getItem('tokenLastModify');
if (lastModify) {
return (new Date().getTime() - Number(LastModify) > maxAge - shift);
} else {
return true;
}
} else {
return true;
}
}
```
