updates to profile and login code

src/components/Profile.vue

@@ -4,7 +4,9 @@
         <section class="hero is-primary">
             <div class="hero-body">
                 <div class="container has-text-centered">
-                    <h2 class="title">Profile ({{tokenValidity}})</h2>
+                    <h2 class="title">Profile</h2>
+                    <h3 class="title">Token validity ({{tokenValidity}})</h3>
+                    <h3 class="title">Refresh token validity ({{refreshTokenValidity}})</h3>
                     <p>{{profile.id}}</p>
                     <p class="subtitle error-msg">{{ errorMsg }}</p>
                 </div>
@@ -24,6 +26,7 @@
                 email: '',
                 errorMsg: '',
                 tokenValidity: -1,
+                refreshTokenValidity: -1,
             };
         },
         methods: {
@@ -43,6 +46,7 @@
                 window.setInterval(() => {
                     this.$log.debug(getRemainingJwtValiditySeconds(this.$store.state.access_token));
                     this.tokenValidity = getRemainingJwtValiditySeconds(this.$store.state.access_token);
+                    this.refreshTokenValidity = getRemainingJwtValiditySeconds(this.$store.state.refresh_token);
                 }, 1000);
             });
 

src/router.ts

@@ -52,6 +52,20 @@ export const router = new Router({
       path: '/profile',
       name: 'Profile',
       component: Profile,
+      beforeEnter(to, from, next) {
+        if (!store.getters.isAuthenticated) {
+          Vue.$log.debug('not authenticated!');
+          if (store.getters.isRefreshTokenValid) {
+            store.dispatch('refreshToken')
+                .then(() => next())
+                .catch(() => next('/login'));
+          } else {
+            next('/login');
+          }
+        } else {
+          next();
+        }
+      },
     },
     {
       path: '*',

src/store.ts

@@ -13,7 +13,7 @@ import {
   register,
   oidc_login, fetchUsers, getFreshToken, fetchProfile,
 } from '@/api';
-import {isValidJwt, EventBus, getRemainingJwtValiditySeconds} from '@/utils';
+import {isValidJwt, EventBus} from '@/utils';
 
 Vue.use(Vuex);
 
@@ -26,8 +26,6 @@ const state = {
   users: [],
   access_token: '',
   refresh_token: '',
-  jwt: '',
-  jwt_refresh_token: '',
 };
 
 const actions = {
@@ -117,8 +115,11 @@ const actions = {
   },
   refreshToken(context: any) {
     EventBus.$emit('refreshingToken');
+    Vue.$log.debug('Refreshing tokens!');
     return getFreshToken(context.state.refresh_token)
-        .then((response) => context.commit('setTokens', { tokens: response.data }))
+        .then((response) => {
+            context.commit('setTokens', { tokens: response.data });
+            Vue.$log.debug('Tokens refreshed!'); })
         .catch((error) => {
           Vue.$log.warn('Error Refreshing token: ', error);
           EventBus.$emit('failedRefreshingToken', error);
@@ -183,8 +184,8 @@ const mutations = {
   setJwtToken(sState: any, payload: any) {
     Vue.$log.debug('setJwtToken payload = ', payload);
     localStorage.tokens = payload.tokens;
-    sState.jwt = payload.tokens.access_token;
+    sState.access_token = payload.tokens.access_token;
-    sState.jwt_refresh_token = payload.tokens.refresh_token;
+    sState.refresh_token = payload.tokens.refresh_token;
   },
   setTokens(sState: any, payload: any) {
     Vue.$log.debug('setTokens payload = ', payload);
@@ -198,16 +199,16 @@ const mutations = {
 const getters = {
   // reusable data accessors
   isAuthenticated(sState: any) {
-    return isValidJwt(sState.access_token);
+    const valid = isValidJwt(sState.access_token);
+    Vue.$log.debug('Access token is valid?: ', valid);
+    Vue.$log.debug(sState.access_token);
+    return valid;
   },
   isRefreshTokenValid(sState: any) {
-   return isValidJwt(sState.refresh_token);
+    const valid = isValidJwt(sState.refresh_token);
-  },
+    Vue.$log.debug('Refresh token is valid?: ', valid);
-  getAccessTokenValidity(sState: any) {
+    Vue.$log.debug(sState.refresh_token);
-    return getRemainingJwtValiditySeconds(sState.access_token);
+    return valid;
-  },
-  getRefreshTokenValidity(sState: any) {
-    return getRemainingJwtValiditySeconds(sState.refresh_token);
   },
   getLoginProviders(sState: any) {
     return sState.loginProviders;

src/utils/index.ts

@@ -20,6 +20,9 @@ export function getRemainingJwtValiditySeconds(jwt: any) {
     }
     const data = JSON.parse(atob(jwt.split('.')[1]));
     const exp = new Date(data.exp * 1000);
-    const diff = new Date().getTime() - exp.getTime();
+    const diff = exp.getTime() - new Date().getTime();
-    return Math.abs(diff / 1000);
+    if (diff <= 0) {
+        return 0;
+    }
+    return Math.round(diff / 1000 * 100) / 100;
 }