带会话存储的Angular 6

Question

我正在使用sessionStorage保存用户数据。 如果您空闲了一段时间（例如2分钟）。 我需要使sessionStorage过期。 我怎么过期呢？ 你能给我一点指导吗？

登录功能

 signin() {

this.disableSubmit = true;
return this.loginservice.loginUser(this.model).subscribe(
  data => {

         if (data) {
              this.responseuser = data.response;
            ;
              if (data.response.responseCode === 200) {

                  window.sessionStorage.setItem('token', JSON.stringify(this.responseuser));
                  window.sessionStorage.setItem('isLoggedIn', 'true');

                  }

            }


},
  error => {

  });

}

Answer 1

您可以安装软件包ng2-idle并在onTimeout订阅中实现您的过期。

这是示例源代码

this.idle.onTimeout.subscribe(() => {

          this.idleState = 'Timed out!';
          this.timedOut = true;         
          this.idle.stop();
          //prevent init multiple time
          this.idle.onTimeout.observers.length = 0;
          this.idle.onIdleStart.observers.length = 0;
          this.idle.onIdleEnd.observers.length = 0;

          // add your code to expire session storage here
        });

https://hackedbychinese.github.io/ng2-idle/

Answer 2

您可以在服务器上为令牌设置过期时间。 如果您进行下一个api调用，则会收到401错误。 一种捕获错误并重定向拦截器的选项：

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { const authHeader = this.getAuthorizationHeaders(req.headers); const authReq = req.clone({ headers: authHeader }); return next.handle(authReq) .pipe( catchError((error) => { if (error.status === 401) { this.localStorageService.removeItem('auth'); this.router.navigate(['/login']); return of({} as HttpEvent<any>); } return throwError(this.errorHandler.getError(error)); }) ); } 

Answer 3

您可以使用var“时间到期”来存储数据（您的示例是Date now + 2 min）。 读取此数据并检查日期之后。