当jwt访问令牌使用angular过期时，如何自动注销应用程序？

Question

我正在使用 jwt 令牌在我的 angular（客户端）和 Spring 引导（服务器）应用程序中对用户进行身份验证。我希望用户在令牌过期时自动注销应用程序。我使用拦截器的概念来检查令牌是否过期，并向用户显示一个弹出窗口，说“您的会话已过期”并注销应用程序，如下所示：

export class TokenInterceptor implements HttpInterceptor {

constructor(private token: TokenStorageService, private router: Router) { }

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    {
        if (this.isTokenExpired()) {
            console.log("token is expired.");
            this.showSessionExpiredPopUp();
        }
        else {
            console.log("token is not expired.");
        }
        return next.handle(req);
    }
}

isTokenExpired() {
        const helper = new JwtHelperService();
        if (helper.isTokenExpired(this.token.getToken())) {
            return true;
        }
        return false;
    }

showSessionExpiredPopUp() {
        Swal.fire({
            html: 'Your session expired!',
        }).then((result) => {
            this.token.signout();
            window.location.href = '';
        });
    }

这工作正常，留下一个与弹出窗口相关的问题。我在向服务器发送登录请求时，也会在执行登录请求时弹出此会话过期的弹出窗口，作为拦截器拦截。有没有办法在登录时不显示这个弹出窗口？在angular中处理这种自动注销场景的最佳方法是什么？

Answer 1

您可以按如下方式更新拦截器和令牌过期方法，在这里，一旦令牌过期，我们将删除它，并在验证时添加一个空检查:

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (this.isTokenExpired()) {
        console.log("token is expired.");
        // here remove the auth token
        this.showSessionExpiredPopUp();
    } else {
        console.log("token is not expired.");
    }
    return next.handle(req);
}

isTokenExpired() {
    const helper = new JwtHelperService();
    return this.token.getToken() && helper.isTokenExpired(this.token.getToken());
}

Answer 2

检测到该令牌已过期时，请将其完全删除。然后，您将能够区分令牌过期且根本不存在令牌的情况。

或者，您可以跳过拦截器中对您的登录endpoint的检查，这样它将检查除登录请求之外的每个请求的过期时间。