课程里面可以加上token失效后，token刷新功能吗

Question

    我最近正在做这块，但是http我大概写了个拦截器。但是不能对error进行有效的拦截，请老师对这块重点讲一下。

Answer 1

接灰的电子产品 2019-06-10 12:55:01

import { Injectable } from "@angular/core";
import { HttpInterceptor, HttpEvent, HttpRequest, HttpHandler } from "@angular/common/http";
import { BehaviorSubject, Observable } from "rxjs";
import { catchError, switchMap, filter, take } from "rxjs/operators";
 
@Injectable({
    providedIn: 'root'
})
export class RefreshTokenInterceptor implements HttpInterceptor {
 
    private refreshTokenInProgress: boolean = false;
 
    private refreshTokenSubject: BehaviorSubject<any> = new BehaviorSubject<any>(
        null
    );
 
    constructor(public accountService: AccountService) {}
 
    intercept(request: HttpRequest<any>,next: HttpHandler): Observable<HttpEvent<any>> {
 
        // 首先检查 token 是否过期
        // 如果没有过期，在 Request Headere 添加鉴权头 addAuthenticationToken();
 
        // 如果过期
        if (tokenHasExpired()) {
 
            if (this.refreshTokenInProgress) {
 
                // 如果 refreshTokenInProgress 为真, 我们需要等到 refreshTokenSubject 有非 null 值
                // 此时才意味着新的 token 已经准备好了，我们可以重试请求
                return this.refreshTokenSubject.pipe(
                    filter(result => result !== null),
                    take(1),
                    switchMap(() => next.handle(this.addAuthenticationToken(request)))
                );
 
            } else {
 
                this.refreshTokenInProgress = true;
 
                // 设置 refreshTokenSubject 为 null，这样后继的请求会等待新 token 的生成
                this.refreshTokenSubject.next(null);
 
                return this.accountService.renewToken()
                        .pipe(                        
                            switchMap(t => {
 
                                this.accountService.saveToken(t);
                                let token = this.accountService.getAccessToken();
 
                                this.refreshTokenInProgress = false; // 设置 refreshTokenInProgress 为 False
                                this.refreshTokenSubject.next(token); // 发射新 token 
 
                                var newReq = this.setToken(req, token);
                                return next.handle(newReq);
 
                            }),
                            catchError((err) => {
 
                                this.refreshTokenInProgress = false;
                                return Observable.throw(err);
 
                            })
                        );
            }
 
        } else {
 
            return this.addAuthenticationToken(request);
 
        }
 
    }
 
    addAuthenticationToken(request) {
        // 从本地取 token
        const accessToken = this.accountService.getAccessToken();
 
        // 如果 access token 是 null，说明用户没有登录
        // 直接返回原来的请求
        if (!accessToken) {
            return request;
        }
 
        // clone 请求, 添加 header
        return request.clone({
            setHeaders: {
                Authorization: accessToken
            }
        });
    }
 
}

• 提问者 天空中的天空的空 #1

  好的，谢谢老师，思路明白。辛苦

• 提问者 天空中的天空的空 #2

  非常感谢！