Javascript 如何正确处理注销的jwt令牌&；使用ionic/Angular处理多个URL

我正在尝试使用angular在ionic框架中构建一个应用程序，但我无法应用以下主题，或者说我不知道具体的实现步骤，以下是我的关键问题：

如何检查令牌到期日期，以便在令牌到期时可以注销用户

我现在如何使用存储在整个应用程序中维护令牌？我在服务中手动调用构造函数

如何根据令牌切换url，即如果令牌在那里，我必须发送x/url如果令牌不在那里，我必须发送y/url

我所做的

Login.page.ts

  this.Auth.authenticate(this.loginForm.value).then((res: any) => {
        this.loading = false;

        if (res.idToken.payload['cognito:groups']) {
          if (res.idToken.payload['cognito:groups'].length > 0) {
            
            admin = 'true';
          } else {
            admin = 'false';
          }
        } else {
          admin = 'false';
        }
        this.storage.set('authToken',res.accessToken.jwtToken);
        this.storage.set('isLogged',true);
        this.navCtrl.navigateBack('/tabs/tab1');
      }).catch((err => {
        this.loading = false;
        this.toastServ.showToast(err.message, 'error');
      })); 

export class HttpConfigInterceptor implements HttpInterceptor {
    token:any;

    constructor(public storage: Storage ) {
        console.log('http interceptor');
        this.storage.get('authToken').then(data => {
            this.token = data;
        });
    }


    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        console.log('intercept');
        if (this.token) {
                
                request = request.clone({ headers: request.headers.set('Authorization', this.token) });
            }
    
            if (!request.headers.has('Content-Type')) {
                request = request.clone({ headers: request.headers.set('Content-Type', 'application/json') });
            }
    
            request = request.clone({ headers: request.headers.set('Accept', 'application/json') });
    
            return next.handle(request).pipe(
                map((event: HttpEvent<any>) => {
                    if (event instanceof HttpResponse) {
                    }
                    return event;
                }));
        }
    }

“http.interceptor.ts”

导出类HttpConfigInterceptor实现HttpInterceptor{
代币：任何；
构造函数（公共存储：存储）{
log（'http拦截器'）；
this.storage.get（'authToken'）。然后（data=>{
this.token=数据；
});
}
拦截（请求：HttpRequest，下一步：HttpHandler）：可观察{
console.log（'intercept'）；
if（this.token）{
request=request.clone（{headers:request.headers.set（'Authorization'，this.token）}）；
}
如果（！request.headers.has（'Content-Type'））{
request=request.clone（{headers:request.headers.set（'Content-Type'，'application/json'））}）；
}
request=request.clone（{headers:request.headers.set（'Accept'，'application/json'）}）；
返回next.handle（request.pipe）(
映射（（事件：HttpEvent）=>{
if（HttpResponse的事件实例）{
}
返回事件；
}));
}
}

user.service.ts

  this.Auth.authenticate(this.loginForm.value).then((res: any) => {
        this.loading = false;

        if (res.idToken.payload['cognito:groups']) {
          if (res.idToken.payload['cognito:groups'].length > 0) {
            
            admin = 'true';
          } else {
            admin = 'false';
          }
        } else {
          admin = 'false';
        }
        this.storage.set('authToken',res.accessToken.jwtToken);
        this.storage.set('isLogged',true);
        this.navCtrl.navigateBack('/tabs/tab1');
      }).catch((err => {
        this.loading = false;
        this.toastServ.showToast(err.message, 'error');
      })); 

export class HttpConfigInterceptor implements HttpInterceptor {
    token:any;

    constructor(public storage: Storage ) {
        console.log('http interceptor');
        this.storage.get('authToken').then(data => {
            this.token = data;
        });
    }


    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        console.log('intercept');
        if (this.token) {
                
                request = request.clone({ headers: request.headers.set('Authorization', this.token) });
            }
    
            if (!request.headers.has('Content-Type')) {
                request = request.clone({ headers: request.headers.set('Content-Type', 'application/json') });
            }
    
            request = request.clone({ headers: request.headers.set('Accept', 'application/json') });
    
            return next.handle(request).pipe(
                map((event: HttpEvent<any>) => {
                    if (event instanceof HttpResponse) {
                    }
                    return event;
                }));
        }
    }

现在我正在像这样检查令牌

 checkUserToken(){
    this.storage.get('authToken').then(data => {
      this.url = this.url + 'someotherurl/';
      this.token = data;
     });

   }
  getLatLong(): Observable<any>{
    this.checkUserToken();
    const endPoint = this.url + 'availableData';
    return this.http.get(endPoint).pipe(map(response => {
      return response;
    }), catchError(error => {
      return 'Unable establish connection!';
    }));
   }

checkUserToken（）{
this.storage.get（'authToken'）。然后（data=>{
this.url=this.url+'someotherurl/'；
this.token=数据；
});
}
getLatLong（）：可观察{
this.checkUserToken（）；
const endPoint=this.url+'availableData'；
返回此.http.get（endPoint.pipe（map）（响应=>{
返回响应；
})，catchError（错误=>{
返回“无法建立连接！”；
}));
}

1）如何检查令牌过期日期，以便在令牌过期时可以注销用户

当您登录时，对于令牌，它也将返回对象内部的到期数据。您可以做的是将到期日期也存储在本地存储器中，以便检查和处理它。例如，您可以在启动应用程序时检查过期日期，您将有三种可能：

• 没有令牌，也没有到期日期（第一次），因此您将转到登录页面
• 令牌已过期，因为过期日期小于当前日期。在这种情况下，您也需要转到登录页面以获取新的登录页面
• 令牌有效且到期日期大于当前日期。您有一个会话，因此无需转到登录页面。您可以使用两个日期之间的差异设置超时，当超时到来时，您将向用户显示一个弹出窗口并转到登录页面。例如，如果当前时间是09:00，到期时间是09:15，您将创建一个15分钟的超时，一旦通过，将向用户显示一个弹出窗口

2） 我现在如何使用存储在整个应用程序中维护令牌？我在服务中手动调用构造函数

您可以将它保存在一个中央单例服务中，您可以随时使用它获取/更新令牌。您可以拥有一个

init

方法，该方法将在应用程序组件中调用，以初始化上述逻辑

3） 如何根据令牌切换url，即如果令牌存在，我必须发送x/url如果令牌不存在，我必须发送y/url

根据上述逻辑，您可以轻松区分这两种状态。因此，您可以轻松地选择要调用的API