Periodically check for expired JWT in MEAN app

Question

I was able to create a login component in Angular 4 through a service that connects to an express API. The backend API returns a JWT token, and the front end stores the token in local storage. The problem is, the token expires on the back end but the local storage token remains.

Throughout the front-end app I check to see if the user is logged in and presents different features if they are. If the token is expired on the back end the user can still attempt to accomplish logged-in behaviors, due to the token still existing in local storage, but the server-side won't allow that to happen. What I'd like to do is periodically check the token on the server-side to see if it's expired, every time I check to see if one of the logged-in-only features should be enabled or not as per this SO answer

The express server route seems to work fine in Postman (localhost:3000/users/token?token=veryLongTokenString):

// check for expired token
router.get('/token',function(req,res,next){
  "use strict";
  jwt.verify(req.query.token, 'secret', function(err){

    if (err) {
      return res.status(403).json({
        title: 'There is no valid token',
        status: res.statusCode,
        error: err
      })
    }
    res.status(200).json({
      message: 'Token is valid',
      token: token,
      userId: user._id
    })
  })
})

Here's where I start to get confused. My tenuous grasp of observables tells me that I return a .map in the service (auth.service.ts):

isLoggedIn() {
    const token = localStorage.getItem('token')
      ? '?token=' + localStorage.getItem('token')
      : '';

    return this.http.get('/users/token' + token)
      .map( response => response.json())
  }

and listen in my component via .subscribe

  isLoggedIn() {
    return this.authService.isLoggedIn()
      .subscribe(x => {
        console.log(x)
        // if status is 200 then return true
        // if not then remove token from local storage?
      })
  }

At this point it will return a 403 error but it does it repeatedly, stacking up thousands of 403 errors a minute. I'm guessing I shouldn't use the .map/.subscribe method, but rather something that only checks once?

https://github.com/eugenehiggins/mean-blog – Gene Higgins Jul 18 '17 at 18:41 — Gene Higgins, Jul 18 '17 at 18:41

score 0 · Answer 1 · answered Apr 29 '18 at 17:28

Is it necessary to actually ping the server for expiration? The expiration date is part of your token, just evaluate the time locally.

 import * as jwt_decode from 'jwt-decode';

 interface TokenDto {
   foo: string;
   exp: number;
   iat: number;
 }

 const sessionIdInfo: TokenDto = jwt_decode(localStorage.getItem('token'));
 const currentDate = moment();
 const current_ts: number = Math.floor(currentDate.valueOf() / 1000);
 if(current_ts > sessionIdInfo.exp)
  console.log("Token expired");

Periodically check for expired JWT in MEAN app

1 Answers1