从Spring Boot后端使用Angular 11拦截器刷新JWT过期令牌

Question

我正在从事一个spring boot angular项目，其中用户从angular前端登录到spring boot上的身份验证api，该api返回一个JWT令牌。我还在Angular上设置了一个拦截器，该拦截器为所有请求附加带有JWT令牌的授权头。

我正在寻找一种拦截angualar请求的方法，这样当spring boot在JWT令牌过期后抛出401错误时，Angular前端将尝试使用过期的JWT和设置为true的新“isRefreshToken”头联系新的refreshtokenendpoint，以接收新的JWT。

这是我当前的AuthService

    @Injectable({
  providedIn: 'root',
})
export class AuthService {

  constructor(private http: HttpClient) {}

  login(username: string, password: string) {
    return this.http
      .post<iUser>('http://localhost:8080/authenticate', { username, password }).pipe(
        tap(res => this.setSession(res)),
        shareReplay()
      )      
  }

  refreshToken(){
    return this.http.post<iUser>('http://localhost:8080/refreshtoken', {responseType: 'text' as 'json'}).pipe(
      tap(res => this.setSession(res)),
      shareReplay()
    )
  }

  private setSession(authResult) {

    let tokenInfo = this.getDecodedAccessToken(authResult.token);   
    const expiresAt = moment(tokenInfo.exp);

    localStorage.setItem('id_token', authResult.token);
    localStorage.setItem('expires_at', JSON.stringify(expiresAt.valueOf()));
    localStorage.setItem('userId', tokenInfo.userId);

  }

  logout() {
    localStorage.removeItem('id_token');
    localStorage.removeItem('expires_at');
    localStorage.removeItem('userId');
  }

  public isLoggedIn() {
    return moment().isBefore(this.getExpiration());
  }

  isLoggedOut() {
    return !this.isLoggedIn();
  }

  getExpiration() {
    const expiration = localStorage.getItem('expires_at');
    const expiresAt = JSON.parse(expiration);
    return moment.unix(expiresAt);
  }

  getDecodedAccessToken(token: string): any {
    try{
        return jwt_decode(token);
    }
    catch(Error){
        return null;
    }
  }
}

这是我正在使用的拦截器：

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private router: Router, private authService: AuthService){}


  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {

    let url = req.url.includes('localhost');

    const idToken = localStorage.getItem('id_token');

    if (idToken && url) {  

      const cloned = req.clone({
        headers: req.headers.set('Authorization', 'Bearer ' + idToken),
      });

      console.log(cloned);

      return next.handle(cloned);

    } else {
      return next.handle(req);
    }
  }
}

Answer 1

我可以向您建议另一种方法，我最近使用这种方法在令牌过期时注销用户。首先让我分享一下我的方法：

loginUser(email: string, password: string) {
    const authData: AuthData = { email: email, password: password };
    this.http.post<{ token: string, expiresIn: number }>('http://localhost:3000/api/users/login', authData).subscribe( response => {
      const token = response.token;
      this.token = token;
      if(token) {
        const expiresInDuration = response.expiresIn;
        this.tokenTimer = setTimeout(() => {
          this.logout();
        }, expiresInDuration*1000);
        this.isAuthenticated = true;
        this.authStatusListener.next(true);
        const now = new Date();
        const expirationDate = new Date(now.getTime() + (expiresInDuration * 1000));
        this.saveAuthData(token, expirationDate);
        this.router.navigate(['']);
      }
    });
  }

logout() {
    this.token = null;
    this.isAuthenticated = false;
    this.authStatusListener.next(false);
    clearTimeout(this.tokenTimer);
    this.clearAuthData();
    this.router.navigate(['']);
  }

  private saveAuthData(token: string, expirationDate: Date) {
    localStorage.setItem('token', token);
    localStorage.setItem('expirationDate', expirationDate.toISOString());
  }

所以我在这里所做的是，我收到了一个expireIn值，该值以令牌过期的秒为单位。然后我设置了一个timeout回调方法，当达到该时间时将调用该方法。在这里，我已经注销了，在你的情况下，你可以调用刷新令牌的应用编程接口

在Interceptor/Guard中，令牌过期时没有额外的事情要做

要控制报头中的注销按钮，只需这样做：

 userIsAuthenticated = false;
  private authListenerSubs: Subscription;
  constructor(private authService: AuthService) { }

  onLogout() {
    this.authService.logout();
  }

  ngOnInit() {
    this.authListenerSubs = this.authService.getAuthStatusListener().subscribe(isAuthenticated => {
      this.userIsAuthenticated = isAuthenticated;
    });
  }

  ngOnDestroy() {
    this.authListenerSubs.unsubscribe();
  }

在超文本标记语言的ngIF中使用userIsAuthentiated。

对于一个真实的场景，你可以帮助这个github回购。