كيف أعرف أن ال token انتهت صلاحيته في react

يمكن معرفة صلاحية ال Token من خلال الشيفرة التالية:

var tokenexpiration: Date = new Date();
tokenexpiration.setSeconds(new Date().getSeconds() + parseInt(this.serverResponse.expires_in))
console.log(tokenexpiration);

حيث استخدما الدالة : this.serverResponse.expires_in لمعرفة تاريخ الصلاحية ويكون بالثواني.

يمكن تخزين هذه القيمة في التخزين local storage لقرائتها لاحقا:

localStorage.setItem('expirationdate',tokenexpiration)

يكفي اختبار الشرط أن الوقت الحالي أكبر من تاريخ الصلاحية لمعرفة انتهاء صلاحيتها ضمن التابع المخصص في Middleware.

مثال:

const checkTokenExpirationMiddleware = store => next => action => {
  const token =
    JSON.parse(localStorage.getItem("user")) &&
    JSON.parse(localStorage.getItem("user"))["token"];
  if (jwtDecode(token).exp < Date.now() / 1000) {
    next(action);
    localStorage.clear();
  }
  next(action);
};

لتنفيذ هذا الأمر دعنا نقسم العمل على خطوات 

1- نود معرفة تاريخ انتهاء التوكن 

2- نود معرفة هل انتهى التوكن في الوقت الحالي أم لا 

3- إذا إنتهى التوكن نود تسجيل الخروج 

الخطوة الأولى معرفة تاريخ الإنتهاء 

يمكننا تحقيق هذه الخطوة من خلال إستخراج بعض الداتا التي يحملها التوكن الذي يتم تخزينه في LocalStorage وتكون مشفره كالتالي: 

const getExpirationDate = (token) => {
    if (!token) {
        return null;
    }

    const jwt = JSON.parse(atob(token.split('.')[1]));

    // نقوم بعملية الضرب في 1000 هنا فقط للتحويل الى مللي ثانية
    return jwt && jwt.exp && jwt.exp * 1000 || null;
};

الخطوة الثانية التأكد هل إنتهت صلاحية التوكن أم لا وذلك بإستخدام الدالة التاليه: 

const isExpired = (exp) => {
    if (!exp) {
        return false;
    }

    return Date.now() > exp;
};

الخطوة الثالثه 

نريد إستخدام ماكتبناه حتى الان للتحديد هل تم الانتهاء وتسجيل الخروج أم لا 

في الجزء المخصص في الكود الذي تقوم فيه بجلب التوكن من اللوكال ستورج بعد جلب التوكن نقوم بعمل هذا الشرط للتكفل بباقي الأمر

if(isExpired(getExpirationDate(accessToken)){
    localStorage.clear(); // هنا نقوم بحذف التوكن من اللوكال ستورج
    history.push('/login'); // نقوم بتوجيه المستخدم الى صفحة تسجيل الدخول مرة أخرى
   }

وبذلك يكون قد حققنا ماتريده.

هناك طريقة أخرى إذا كنت لا تريد أن تقوم بتسجيل الخروج بل تريد أن تقوم بتجديد التوكن فقط حيث تعتمد هذه الطريقه على مايسمى بال Refresh Token.