时间戳

首页 > 解决方案 > 当jwt访问令牌使用角度过期时如何自动注销应用程序？

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

问题描述

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

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

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

标签： angularjwt

解决方案

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

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

推荐阅读