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

Question

我正在使用 jwt 令牌在我的 angular（客户端）和 spring 引导（服务器）应用程序中验证用户。 我希望用户在令牌过期时自动退出应用程序。 我已经使用拦截器的概念来检查令牌是否过期并向用户显示弹出消息“您的 session 已过期”并退出应用程序，如下所示：

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 = '';
        });
    }

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

Answer 1

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

或者，您可以在拦截器中跳过对您的登录 endoint 的检查，以便它将检查除登录请求之外的每个请求是否过期。

Answer 2

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

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());
}