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

src/api/Repository.js

@@ -8,13 +8,28 @@ 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.response.use(function (response) {
-    return response;
-}, function (error) {
-    if (401 === error.response.status) {
+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?",
@@ -24,10 +39,38 @@ 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 = '/';
+                }
+            });
+        }
+        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 || 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?",
+            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 = '/';
             }
         });

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 {getRemainingJwtValiditySeconds} from "../utils";
-    import { RepositoryFactory} from "@/api/RepositoryFactory";
+    import { EventBus } from '@/utils';
+    import {getRemainingJwtValiditySeconds} from '../utils';
+    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;
-                var end = start + this.elementsPerPage;
+                let start = (this.currentPage-1) * 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,10 +207,14 @@ const mutations = {
   },
   setTokens(sState: any, payload: any) {
     Vue.$log.debug('setTokens payload = ', payload);
+    if(payload.tokens.access_token){
         sState.access_token = payload.tokens.access_token;
+    }
+    if(payload.tokens.refresh_token){
       sState.refresh_token = payload.tokens.refresh_token;
-    Vue.$log.debug(sState.access_token);
-    Vue.$log.debug(sState.access_token);
+    }
+    Vue.$log.debug('access_token: ' + sState.access_token);
+    Vue.$log.debug('refresh_token: ' + sState.refresh_token);
   },
 };
 
@@ -225,7 +229,7 @@ const getters = {
     isRefreshTokenValid(sState: any) {
         const valid = isValidJwt(sState.refresh_token);
         Vue.$log.debug('Refresh token is valid?: ', valid);
-    Vue.$log.debug(sState.refresh_token);
+        Vue.$log.debug('sState.refresh_token');
         return valid;
     },
     getLoginProviders(sState: any) {