updated Repository.js to use actual access token (interceptor)

src/api/Repository.js

@@ -8,13 +8,56 @@ const baseDomain = "http://localhost:5443";
 const API_URL = `${baseDomain}/api/v1`;
 
 const api = axios.create({
-    baseURL: API_URL, headers: { Authorization: `Bearer ${store.state.access_token}` },
+    baseURL: API_URL,
+});
+
+api.interceptors.request.use(async function(config) {
+    if (store.getters.isAuthenticated) {
+        const token = store.state.access_token;
+        config.headers.Authorization = `Bearer ${token}`;
+        return config;
+    } else {
+        Vue.$log.warn("the access_token is not valid anymore.");
+        if(store.getters.isRefreshTokenValid){
+            await store.dispatch('refreshToken');
+            const token = store.state.access_token;
+            config.headers.Authorization = `Bearer ${token}`;
+            /*store.dispatch('refreshToken').then( () => {
+                    const token = store.state.access_token;
+                    config.headers.Authorization = `Bearer ${token}`;
+                }).catch( () => {
+                    Vue.$log.error("Could not refresh tokens!");
+                    window.location = '/login';
+            });*/
+        } else {
+            Vue.swal({
+                title: "Session Expired",
+                text: "Your token/session has expired. Would you like to be redirected to the login page?",
+                type: "warning",
+                showCancelButton: true,
+                confirmButtonColor: "#DD6B55",
+                confirmButtonText: "Yes",
+            }).then( (result) => {
+                if(result.value) {
+                    Vue.$log.info("redirect to login!");
+                    window.location = '/login';
+                } else {
+                    Vue.$log.info("redirect to home!");
+                    window.location = '/';
+                }
+            });
+        }
+        return config;
+    }
 });
 
 api.interceptors.response.use(function (response) {
+    Vue.$log.debug("Token OK: " + store.state.access_token);
     return response;
 }, function (error) {
-    if (401 === error.response.status) {
+    if (401 === error.response.status || 422 === error.response.status) {
+        Vue.$log.warn("Invalid / no access token?!");
+        Vue.$log.debug(store.state.access_token);
         Vue.swal({
             title: "Session Expired",
             text: "Your token/session has expired. Would you like to be redirected to the login page?",
@@ -24,10 +67,10 @@ api.interceptors.response.use(function (response) {
             confirmButtonText: "Yes",
         }).then( (result) => {
             if(result.value) {
-                console.log("redirect to login!");
+                Vue.$log.info("redirect to login!");
                 window.location = '/login';
             } else {
-                console.log("redirect to home!");
+                Vue.$log.info("redirect to home!");
                 window.location = '/';
             }
         });

src/api/index.ts

@@ -34,7 +34,7 @@ export function oidc_login(redirectionUrl: any) {
 }
 
 export function getFreshToken(refreshToken: any) {
-    return axios.get(`${API_URL}/auth/fresh`, refreshToken);
+    return axios.get(`${API_URL}/auth/refresh`, { headers: { Authorization: `Bearer ${refreshToken}` } });
 }
 
 export function getProviders() {

src/components/User.vue

@@ -47,9 +47,9 @@
 </template>
 
 <script>
-    import { EventBus } from '@/utils'
+    import { EventBus } from '@/utils';
-    import {getRemainingJwtValiditySeconds} from "../utils";
+    import {getRemainingJwtValiditySeconds} from '../utils';
-    import { RepositoryFactory} from "@/api/RepositoryFactory";
+    import { RepositoryFactory} from '@/api/RepositoryFactory';
     const UserRepository = RepositoryFactory.get('user');
 
     export default {
@@ -60,7 +60,7 @@
                 errorMsg: '',
                 sortColumn: '',
                 currentPage: 1,
-                elementsPerPage: 5
+                elementsPerPage: 5,
             };
         },
         methods: {
@@ -68,7 +68,7 @@
                 this.isLoading = true;
                 // const { data } = await GroupRepository.get();
                 UserRepository.getUsers()
-                    .then(response => {
+                    .then( (response) => {
                         this.users = response.data;
                         this.isLoading = false;
                         this.$log.debug(response);
@@ -76,8 +76,8 @@
 
             },
             get_rows() {
-                var start = (this.currentPage-1) * this.elementsPerPage;
+                let start = (this.currentPage-1) * this.elementsPerPage;
-                var end = start + this.elementsPerPage;
+                let end = start + this.elementsPerPage;
                 return this.users.slice(start, end);
             },
             num_pages() {
@@ -94,7 +94,7 @@
                     this.sortColumn = col;
                 }
 
-                var ascending = this.ascending;
+                let ascending = this.ascending;
 
                 this.users.sort(function(a, b) {
                     if (a[col] > b[col]) {

src/main.ts

@@ -26,7 +26,7 @@ const options = {
   showLogLevel : true,
   showMethodName : true,
   separator: '|',
-  showConsoleColors: true
+  showConsoleColors: true,
 };
 
 Vue.use(VueLogger, options);

src/store.ts

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
-import createPersistedState from 'vuex-persistedstate'
+import createPersistedState from 'vuex-persistedstate';
 
 // imports of AJAX functions will go here
 import {
@@ -207,30 +207,34 @@ const mutations = {
   },
   setTokens(sState: any, payload: any) {
     Vue.$log.debug('setTokens payload = ', payload);
-    sState.access_token = payload.tokens.access_token;
+    if(payload.tokens.access_token){
-    sState.refresh_token = payload.tokens.refresh_token;
+        sState.access_token = payload.tokens.access_token;
-    Vue.$log.debug(sState.access_token);
+    }
-    Vue.$log.debug(sState.access_token);
+    if(payload.tokens.refresh_token){
+      sState.refresh_token = payload.tokens.refresh_token;
+    }
+    Vue.$log.debug('access_token: ' + sState.access_token);
+    Vue.$log.debug('refresh_token: ' + sState.refresh_token);
   },
 };
 
 const getters = {
-  // reusable data accessors
+    // reusable data accessors
-  isAuthenticated(sState: any) {
+    isAuthenticated(sState: any) {
-    const valid = isValidJwt(sState.access_token);
+        const valid = isValidJwt(sState.access_token);
-    Vue.$log.debug('Access token is valid?: ', valid);
+        Vue.$log.debug('Access token is valid?: ', valid);
-    Vue.$log.debug(sState.access_token);
+        Vue.$log.debug(sState.access_token);
-    return valid;
+        return valid;
-  },
+    },
-  isRefreshTokenValid(sState: any) {
+    isRefreshTokenValid(sState: any) {
-    const valid = isValidJwt(sState.refresh_token);
+        const valid = isValidJwt(sState.refresh_token);
-    Vue.$log.debug('Refresh token is valid?: ', valid);
+        Vue.$log.debug('Refresh token is valid?: ', valid);
-    Vue.$log.debug(sState.refresh_token);
+        Vue.$log.debug('sState.refresh_token');
-    return valid;
+        return valid;
-  },
+    },
-  getLoginProviders(sState: any) {
+    getLoginProviders(sState: any) {
-    return sState.loginProviders;
+        return sState.loginProviders;
-  },
+    },
 };
 
 const store = new Vuex.Store({