javascript - 如何使用 ionic/Angular 正确处理 jwt token 以进行注销和处理多个 url

Question

我正在尝试在以下主题上使用 Angular 在 ionic 框架中构建应用程序，我无法应用或说我不知道​​实现以下是我的关键问题的确切程序:

我怎样才能检查 token 到期日期，以便如果 token 过期，我可以注销用户。

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

如何根据 token 切换 url，即如果有 token ，我必须发送 x/url 如果 token 不存在，我必须发送 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');
      })); 

" http.interceptor.ts "

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

user.service.ts
现在我正在检查这样的 token

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

Answer 1

1)如何检查 token 到期日期，以便如果 token 过期，我可以注销用户
当您登录时，对于 token ，它也会在对象内返回到期数据。您可以做的是将到期日期也存储在本地存储中，以便您可以检查和处理它。例如，您可以在启动应用程序时检查到期日期，您将有三种可能:

既没有 token 也没有到期日期(第一次)，因此您将转到登录页面。

token 已过期，因为到期日期小于当前日期。在这种情况下，您也需要转到登录页面来获取新的登录页面。

token 有效且到期日期大于当前日期。您有一个 session ，因此无需转到登录页面。您可以使用两个日期之间的差异设置超时，当超时到来时，您将向用户显示一个弹出窗口并转到登录页面。例如，如果当前时间是 09:00 并且到期时间是 09:15，您将创建一个 15 分钟的超时，一旦通过就会向用户显示一个弹出窗口。

2)我现在如何使用存储在整个应用程序中维护 token ，我手动调用服务中的构造函数？
您可以将其保存在中央单例服务中，您可以随时使用它获取/更新 token 。你可以有一个init将在 App 组件中调用以初始化上述逻辑的方法。
3)如何根据 token 切换 url，即如果 token 存在我必须发送 x/url 如果 token 不存在我必须发送 y/url
从上面的逻辑，你可以很容易地区分这两种状态。因此，您可以轻松选择要调用的 API。