Javascript 为什么我的angular拦截器从localstorage中获取令牌的旧值？

当我登录API向我发送令牌和令牌生存时间时，当令牌生存时间即将结束时，我通过向API发送请求来刷新我的令牌，并接收新令牌和新的刷新令牌时间
当我刷新或导航到另一个页面时（当令牌生命周期结束时），我的拦截器从

LocalStorage

发送令牌的旧值，API给我一个错误“不正确的令牌”，当我再次刷新或导航到另一个页面时，它会发送正确的令牌。
但当令牌生存时间将如上所述结束时，它会重复。
这是我的

令牌拦截器.service.ts

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { LoginService } from '../services/login.service';

@Injectable()
export class TokenInterceptorService implements HttpInterceptor {
  constructor(
    private loginService: LoginService
  ) { }
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (
      this.loginService.isLogged
    ) {
      const token = localStorage.getItem('access-token');
      const headers = new HttpHeaders().set('Authorization', `Bearer ${token}`);
      request = request.clone({ headers: headers });
    }
    return next.handle(request);
  }
}

ngOnInit() {
    if (this.loginService.isLogged) {
      if (this.loginService.isNeedToRefresh === true) {
        this.loginService.refresh().subscribe((res: boolean) => {
          if (res === true) {
            this.router.navigate(['']);
          }
        });
      } else if (this.loginService.isNeedToRefresh === false) {
        this.router.navigate(['']);
      }
    }
  }

ngOnInit() {
    $(document).on('click', '[href="#"]', e => e.preventDefault());

    this.router.events.subscribe((val) => {
      if (val instanceof NavigationEnd) {
        if (!(val.url.indexOf('/login') === 0)) {
          this.authWatcher();
        }
      }
    });
  }

authWatcher() {
    if (this.loginService.isLogged) {
      if (this.loginService.isNeedToRefresh === true) {
        this.loginService.refresh().subscribe((refresh: boolean) => {
          if (refresh === false) {
            this.authModalRef = this.modalService.show(this.staticModal, { backdrop: 'static' });
          } else {
            this.loginService.checkToken().subscribe((check: boolean) => {
              if (!check) {
                this.logoutService.logout();
                this.router.navigate(['login']);
              }
            });
          }
        });
  }
}

这里是我在

login.component.ts

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { LoginService } from '../services/login.service';

@Injectable()
export class TokenInterceptorService implements HttpInterceptor {
  constructor(
    private loginService: LoginService
  ) { }
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (
      this.loginService.isLogged
    ) {
      const token = localStorage.getItem('access-token');
      const headers = new HttpHeaders().set('Authorization', `Bearer ${token}`);
      request = request.clone({ headers: headers });
    }
    return next.handle(request);
  }
}

ngOnInit() {
    if (this.loginService.isLogged) {
      if (this.loginService.isNeedToRefresh === true) {
        this.loginService.refresh().subscribe((res: boolean) => {
          if (res === true) {
            this.router.navigate(['']);
          }
        });
      } else if (this.loginService.isNeedToRefresh === false) {
        this.router.navigate(['']);
      }
    }
  }

ngOnInit() {
    $(document).on('click', '[href="#"]', e => e.preventDefault());

    this.router.events.subscribe((val) => {
      if (val instanceof NavigationEnd) {
        if (!(val.url.indexOf('/login') === 0)) {
          this.authWatcher();
        }
      }
    });
  }

authWatcher() {
    if (this.loginService.isLogged) {
      if (this.loginService.isNeedToRefresh === true) {
        this.loginService.refresh().subscribe((refresh: boolean) => {
          if (refresh === false) {
            this.authModalRef = this.modalService.show(this.staticModal, { backdrop: 'static' });
          } else {
            this.loginService.checkToken().subscribe((check: boolean) => {
              if (!check) {
                this.logoutService.logout();
                this.router.navigate(['login']);
              }
            });
          }
        });
  }
}

我还在

app.component.ts

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { LoginService } from '../services/login.service';

@Injectable()
export class TokenInterceptorService implements HttpInterceptor {
  constructor(
    private loginService: LoginService
  ) { }
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (
      this.loginService.isLogged
    ) {
      const token = localStorage.getItem('access-token');
      const headers = new HttpHeaders().set('Authorization', `Bearer ${token}`);
      request = request.clone({ headers: headers });
    }
    return next.handle(request);
  }
}

ngOnInit() {
    if (this.loginService.isLogged) {
      if (this.loginService.isNeedToRefresh === true) {
        this.loginService.refresh().subscribe((res: boolean) => {
          if (res === true) {
            this.router.navigate(['']);
          }
        });
      } else if (this.loginService.isNeedToRefresh === false) {
        this.router.navigate(['']);
      }
    }
  }

ngOnInit() {
    $(document).on('click', '[href="#"]', e => e.preventDefault());

    this.router.events.subscribe((val) => {
      if (val instanceof NavigationEnd) {
        if (!(val.url.indexOf('/login') === 0)) {
          this.authWatcher();
        }
      }
    });
  }

authWatcher() {
    if (this.loginService.isLogged) {
      if (this.loginService.isNeedToRefresh === true) {
        this.loginService.refresh().subscribe((refresh: boolean) => {
          if (refresh === false) {
            this.authModalRef = this.modalService.show(this.staticModal, { backdrop: 'static' });
          } else {
            this.loginService.checkToken().subscribe((check: boolean) => {
              if (!check) {
                this.logoutService.logout();
                this.router.navigate(['login']);
              }
            });
          }
        });
  }
}

我的拦截器最好的工作方式是什么

小更新，以下是我如何检查是否需要刷新

 get isNeedToRefresh(): boolean {
    const accessExpireTimestamp = new Date(
      localStorage.getItem('expires-at-access')
    ).getTime();
    const refreshExpireTimestamp = new Date(
      localStorage.getItem('expires-at-refresh')
    ).getTime();
    const nowTimestamp = new Date().getTime();
    if (nowTimestamp >= accessExpireTimestamp) {
      if (nowTimestamp >= refreshExpireTimestamp) {
        return null; // Refresh token expired
      } else {
        return true; // Refresh token not expired
      }
    }
    return false;
  }

---

如果有其他人会遇到这样的问题，这个决定对我有效 基于此，我已经完全重写了我的拦截器

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpRequest，HttpHandler，HttpEvent，HttpInterceptor}；
从“../services/login.service”导入{LoginService}；
从“rxjs”导入{可观察，行为主体，主体}；
从“rxjs/operators”导入{switchMap，take，filter}；
@可注射（）
导出类TokenInterceptorService实现HttpInterceptor{
私有refreshTokenInProgress=false；
private refreshTokenSubject:Subject=new BehaviorSubject（空）；
构造函数（公共登录服务：登录服务）{}
拦截（请求：HttpRequest，下一步：HttpHandler）：可观察{
if（request.url.indexOf（'refresh'）！=-1）{
下一步返回。处理（请求）；
}
const accessExpired=this.loginService.accessExpired；
const refreshExpired=this.loginService.refreshExpired；
如果（访问过期和刷新过期）{
下一步返回。处理（请求）；
}
如果（accessExpired&！refreshExpired）{
如果（！this.refreshTokenInProgress）{
this.refreshTokenInProgress=true；
this.refreshTokenSubject.next（null）；
返回此.loginService.refresh（）管道(
开关映射（（authResponse）=>{
console.log（'authResponse'，authResponse）
如果（authResponse）{
const-token=localStorage.getItem（'access-token'）；
this.refreshTokenInProgress=false；
this.refreshTokenSubject.next（令牌）；
返回next.handle（this.injectToken（request））；
}否则{
下一步返回。处理（请求）；
}
}),
);
}否则{
返回此.refreshTokenSubject.pipe(
过滤器（结果=>result！==null），
以（1）为例，
开关图（（分辨率）=>{
返回next.handle（this.injectToken（请求））
})
);
}
}
如果（！accessExpired）{
返回next.handle（this.injectToken（request））；
}
}
injectToken（请求：HttpRequest）{
const-token=localStorage.getItem（'access-token'）；
return request.clone({
集合标题：{
授权：`Bearer${token}`
}
});
}
}

乍一看，我没有发现任何错误（尽管我只看了前两个街区）。尝试在

if（res.access&&res.refresh）内登录{

只是为了检查你的代码是否在那里。@GytisTG是的，当我重新加载页面时，它可以工作。当会话令牌时间结束时，拦截器不知道他应该使用新令牌，他只是从localstorage获取值。我需要硬重新加载页面来刷新localstorage中的令牌，或者找到另一种最好的方法我想我需要刷新Tokn在拦截器中，但我不知道雪人是如何再次仔细检查的，我现在想知道你是如何刷新

this.loginService.isNeedToRefresh===true

？因为如果你在时间过期后不刷新它，它将计算为

false

，并且不会及时刷新，只能在第二次刷新。@GytisTG I have更新了我的问题。登录服务中描述了此方法