Angular + Spring 启动 Jwt 刷新令牌功能

Question

我创建了一个刷新令牌功能来保护我网站中的 Jwt 身份验证。但是有一个问题，jwt 令牌被刷新多次，直到用户决定注销。我决定让刷新令牌在一段时间内过期，让用户定期登录。

当这样的令牌过期时，除了在 spring 中抛出 500 异常之外，我什么也想不出。稍后，Angular 中的令牌拦截器捕获它并注销。然而，这段代码有效，但我怀疑我的实现不是很好。你能给我一些建议，如何改进我的代码以使其更干净吗？

这是我的代码 (Spring):

AuthController.java

 @PostMapping("/refresh/token")
    public ResponseEntity<AuthenticationResponse> refreshTokens(@Valid @RequestBody RefreshTokenRequest refreshTokenRequest) throws Exception {
        return ResponseEntity.status(HttpStatus.OK).body(authService.refreshToken(refreshTokenRequest));
    }

AuthService.java

 public AuthenticationResponse refreshToken(RefreshTokenRequest refreshTokenRequest) throws Exception {

        var authenticationResponse = new AuthenticationResponse();

        if(refreshTokenService.validateRefreshToken(refreshTokenRequest.getRefreshToken())){
            String token = jwtUtil.generateToken(refreshTokenRequest.getUserName());

            authenticationResponse.setAuthenticationToken(token);
            authenticationResponse.setRefreshToken(refreshTokenRequest.getRefreshToken());
            authenticationResponse.setUserName(refreshTokenRequest.getUserName());
        } else {
            throw new Exception("Refresh Token has expired");
        }

        return authenticationResponse;
    }

RefreshTokenService.java

 boolean validateRefreshToken(String token){

        System.out.println("refreshtoken name: " + refreshTokenRepository.findByToken(token));

        RefreshToken refreshToken = refreshTokenRepository.findByToken(token)
                .orElseThrow(() -> new ResourceNotFoundException("The Refresh Token hasn't been found"));


        long dateCreated = refreshToken.getCreatedDate().toEpochMilli();

        if(Instant.now().toEpochMilli() - dateCreated > 160000){
            return false;
        }
        return true;
    }

(Angular 代码)

代币-interceptor.ts

export class TokenInterceptor implements HttpInterceptor {

    isTokenRefreshing = false;
    refreshTokenSubject: BehaviorSubject<any> = new BehaviorSubject(null);

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

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if (req.url.indexOf('refresh') !== -1 || req.url.indexOf('login') !== -1) {
            return next.handle(req);
        }

        const jwtToken = this.authService.getJwtToken();

        if(jwtToken){
            return next.handle(this.addToken(req, jwtToken)).pipe(catchError(error => {
                if(error instanceof HttpErrorResponse && error.status === 403) {
                    return this.handleAuthErrors(req, next);
                } else {
                    return throwError(error);
                }
            }));
        }
        return next.handle(req);
    }
   
    private handleAuthErrors(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if (!this.isTokenRefreshing){
            this.isTokenRefreshing = true;
            this.refreshTokenSubject.next(null);

            return this.authService.refreshToken().pipe(
                switchMap((refreshTokenResponse: AuthenticationResponse) => {
                    this.isTokenRefreshing = false;
                    this.refreshTokenSubject
                    .next(refreshTokenResponse.authenticationToken);
                    return next.handle(this.addToken(req, refreshTokenResponse.authenticationToken));
                }), catchError(error => {
                    if(error instanceof HttpErrorResponse && error.status === 500) {
                        this.isTokenRefreshing = false;
                        this.authService.logout();
                        this.router.navigateByUrl('/login');
                        return of(null);
                    } else {
                        return throwError(error);
                    }
                })
            ) 
        } else {
            return this.refreshTokenSubject.pipe(
                filter(result => result !== null),
                take(1),
                switchMap((res) => {
                    return next.handle(this.addToken(req, this.authService.getJwtToken()))
                })
            )
        }
    }
  



    addToken(req: HttpRequest<any>, jwtToken: any) {
        return req.clone({
            headers: req.headers.set('Authorization', 'Bearer '+ jwtToken)
        });
    }
}

auth-service.ts

导出class AuthService {

  @Output() loggedIn: EventEmitter<boolean> = new EventEmitter();
  @Output() username: EventEmitter<string> = new EventEmitter();

  loginUrl='http://localhost:8080/api/auth/login';
  logoutUrl='http://localhost:8080/api/auth/logout';
  refreshTokenUrl='http://localhost:8080/api/auth/refresh/token';

  refreshTokenRequest = {
    refreshToken: this.getRefreshToken(),
    userName: this.getUserName()
  }

  constructor(private http: HttpClient, private localStorage: LocalStorageService) { }


  login(loginRequest: LoginRequest): Observable<boolean>{
    return this.http.post<AuthenticationResponse>(this.loginUrl, loginRequest).pipe(
      map(
        data => {
          this.localStorage.store('authenticationToken', data.authenticationToken);
          this.localStorage.store('userName', data.userName);
          this.localStorage.store('refreshToken', data.refreshToken);

          this.loggedIn.emit(true);
          this.username.emit(data.userName);
          console.log('Login successful')
          console.log("Token: " + this.localStorage.retrieve('authenticationToken'))
          console.log("Token: " + this.localStorage.retrieve('userName'))
          return true;
        }
      )
    )
  }

  logout(){
    this.http.post(this.logoutUrl, this.refreshTokenRequest, {responseType: 'text'})
    .subscribe(data => {
      console.log(data);
    }, error => {
      throwError(error)
    }
    )
    this.localStorage.clear('refreshToken');
    this.localStorage.clear('userName');
    this.localStorage.clear('authenticationToken');
    this.loggedIn.emit(false);
    console.log("logout completed");
    console.log(this.localStorage.retrieve('refreshToken'))

  }


  refreshToken(){
    return this.http.post<AuthenticationResponse>(this.refreshTokenUrl, this.refreshTokenRequest)
    .pipe(
      tap(
        response => {
          this.localStorage.clear('authenticationToken');

          this.localStorage.store('authenticationToken', response.authenticationToken);
          console.log("Token has been refreshed")
          console.log(this.localStorage.retrieve('authenticationToken'))
        }, error => {
          throwError(error)
          
        }
      )
    )
  }

  getJwtToken(){
    return this.localStorage.retrieve('authenticationToken');
  }

  getUserName(){
   return this.localStorage.retrieve('userName');
  }

  getRefreshToken() {
    return this.localStorage.retrieve('refreshToken');
  }

  isLoggedIn(): boolean {
    return this.getJwtToken() != null;
  }

}

谢谢！

Answer 1

当 jwt 令牌过期时，您的刷新方法将抛出状态 500

解决这个问题

令牌过期时使登录会话无效，这将强制用户重新登录
运行令牌过期前的刷新方法（效果很好）

也可以捕获 ExpiredJwtException 并强制刷新令牌，但我没有尝试过

Angular + Spring 启动 Jwt 刷新令牌功能

Angular + Spring boot Jwt refresh token feature

spring

jwt

refresh-token

angular