added profile and token refresh

src/components/Profile.vue

@@ -4,7 +4,7 @@
         <section class="hero is-primary">
             <div class="hero-body">
                 <div class="container has-text-centered">
-                    <h2 class="title">Profile</h2>
+                    <h2 class="title">Profile ({{tokenValidity}})</h2>
                     <p>{{profile.id}}</p>
                     <p class="subtitle error-msg">{{ errorMsg }}</p>
                 </div>
@@ -16,12 +16,14 @@
 
 <script>
     import { EventBus } from '@/utils'
+    import {getRemainingJwtValiditySeconds} from "../utils";
 
     export default {
         data () {
             return {
                 email: '',
                 errorMsg: '',
+                tokenValidity: -1,
             };
         },
         methods: {
@@ -37,6 +39,13 @@
             });
             this.$store.dispatch('loadProfile');
 
+            this.$nextTick(() =>{
+                window.setInterval(() => {
+                    this.$log.debug(getRemainingJwtValiditySeconds(this.$store.state.access_token));
+                    this.tokenValidity = getRemainingJwtValiditySeconds(this.$store.state.access_token);
+                }, 1000);
+            });
+
 
         },
         beforeDestroy () {

src/store.ts

@@ -13,7 +13,7 @@ import {
   register,
   oidc_login, fetchUsers, getFreshToken, fetchProfile,
 } from '@/api';
-import { isValidJwt, EventBus } from '@/utils';
+import {isValidJwt, EventBus, getRemainingJwtValiditySeconds} from '@/utils';
 
 Vue.use(Vuex);
 
@@ -61,6 +61,22 @@ const actions = {
           EventBus.$emit('failedLoadingUsers', error);
         });
   },
+  loadProfileAuthCheck(context:any){
+      if (!getters.isAuthenticated) {
+          EventBus.$emit('accessTokenInvalid');
+          if (!getters.isRefreshTokenValid) {
+              Vue.$log.warn('Access and refresh token invalid! User must login again!');
+              EventBus.$emit('refreshTokenInvalid');
+              EventBus.$emit('accessAndRefreshTokenInvalid');
+          } else {
+              return context.dispatch('refreshToken').then( () => {
+                  context.commit('loadProfile');
+              });
+          }
+      } else {
+          context.commit('loadProfile');
+      }
+  },
   loadProfile(context: any) {
     return fetchProfile(context.state.access_token)
         .then((response) => {
@@ -100,7 +116,7 @@ const actions = {
         });
   },
   refreshToken(context: any) {
-    // context.commit('setUserData', { userData });
+    EventBus.$emit('refreshingToken');
     return getFreshToken(context.state.refresh_token)
         .then((response) => context.commit('setTokens', { tokens: response.data }))
         .catch((error) => {
@@ -184,6 +200,15 @@ const getters = {
   isAuthenticated(sState: any) {
     return isValidJwt(sState.access_token);
   },
+  isRefreshTokenValid(sState: any) {
+   return isValidJwt(sState.refresh_token);
+  },
+  getAccessTokenValidity(sState: any) {
+    return getRemainingJwtValiditySeconds(sState.access_token);
+  },
+  getRefreshTokenValidity(sState: any) {
+    return getRemainingJwtValiditySeconds(sState.refresh_token);
+  },
   getLoginProviders(sState: any) {
     return sState.loginProviders;
   },

src/utils/index.ts

@@ -13,3 +13,13 @@ export function isValidJwt(jwt: any) {
     const now = new Date();
     return now < exp;
 }
+
+export function getRemainingJwtValiditySeconds(jwt: any) {
+    if (!jwt || jwt.split('.').length < 3) {
+        return false;
+    }
+    const data = JSON.parse(atob(jwt.split('.')[1]));
+    const exp = new Date(data.exp * 1000);
+    const diff = new Date().getTime() - exp.getTime();
+    return Math.abs(diff / 1000);
+}