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

时间:2021-06-04 11:18:29

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

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

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

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

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