Implement token refreshing

package-lock.json

@@ -528,6 +528,14 @@
         "is-buffer": "^2.0.2"
       }
     },
+    "axios-auth-refresh": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/axios-auth-refresh/-/axios-auth-refresh-1.0.7.tgz",
+      "integrity": "sha512-TQl1tF+MY+iDG93WpiqcnwGb1lvdJLKzi0IN/7hBkYFlpOC6xv4S+cW3QHZOBjKpFWRWqHg9fXd/PDsCvJ3uLA==",
+      "requires": {
+        "axios": "^0.18.0"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@fancyapps/fancybox": "^3.5.7",
     "axios": "^0.18.0",
+    "axios-auth-refresh": "^1.0.7",
     "bootstrap-sass": "^3.4.1",
     "bourbon": "^4.3.2",
     "cookieconsent": "^3.1.0",

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/api/index.js

@@ -1,77 +1,26 @@
-// See https://www.techynovice.com/setting-up-JWT-token-refresh-mechanism-with-axios/
+import axios from 'axios'
+import createAuthRefreshInterceptor from 'axios-auth-refresh'
 
-import axios from 'axios';
+const authenticatedClient = axios.create();
 
-const authenticatedClient = axios.create({
+const getAccessToken = () => {
-    headers: {
+    return sessionStorage.getItem('token');
-        'Authentication': 'Bearer ' + sessionStorage.getItem('token')
+};
-    }
+
+authenticatedClient.interceptors.request.use(request => {
+    request.headers['Authorization'] = 'Bearer ' + getAccessToken();
+    return request;
 });
 
-authenticatedClient.interceptors.response.use(
+const refreshAuth = failedRequest => axios.post('/api/token_refresh', {
-    response => response,
+        refresh_token: sessionStorage.getItem('refreshToken')
-    error => {
+    }).then(response => {
-        const errorResponse = error.response;
+        sessionStorage.setItem('token', response.data.token);
-        if (isTokenExpiredError(errorResponse)) {
+        sessionStorage.setItem('refreshToken', response.data.refresh_token);
-            return resetTokenAndReattemptRequest(error)
+        failedRequest.response.config.headers['Authorization'] = 'Bearer ' + response.data.token;
-        }
+        return Promise.resolve();
-        return Promise.reject(error)
+    });
-    }
-);
 
-function isTokenExpiredError (errorResponse) {
+createAuthRefreshInterceptor(authenticatedClient, refreshAuth);
-    if (errorResponse.config.code !== 401) {
-        return false
-    }
 
-    return errorResponse.message.match(/expired/);
+export default authenticatedClient
-}
-
-let isAlreadyFetchingAccessToken = false;
-let subscribers = [];
-
-async function resetTokenAndReattemptRequest (error) {
-    try {
-        const { response: errorResponse } = error;
-        const refreshToken = await getRefreshToken();
-        if (!refreshToken) {
-            return Promise.reject(error);
-        }
-        const retryOriginalRequest = new Promise(resolve => {
-            addSubscriber(authToken => {
-                errorResponse.config.headers.Authorization = 'Bearer ' + authToken;
-                resolve(axios(errorResponse.config));
-            });
-        });
-        if (!isAlreadyFetchingAccessToken) {
-            isAlreadyFetchingAccessToken = true;
-            axios({
-                method: 'post',
-                url: `<YOUR TOKEN REFREH ENDPOINT>`,
-                data: {
-                    refresh_token: refreshToken
-                }
-            }).then(response => {
-                if (!response.data) {
-                    return Promise.reject(error);
-                }
-                const newToken = response.data.refresh_token;
-                saveRefreshToken(newToken);
-                isAlreadyFetchingAccessToken = false;
-                onAccessTokenFetched(newToken);
-            });
-        }
-        return retryOriginalRequest;
-    } catch (err) {
-        return Promise.reject(err);
-    }
-}
-
-function onAccessTokenFetched(access_token) {
-    subscribers.forEach(callback => callback(access_token));
-    subscribers = [];
-}
-
-function addSubscriber(callback) {
-    subscribers.push(callback);
-}

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Address.vue

@@ -65,10 +65,10 @@
 <script>
     import Vue from 'vue'
     import { mapState, mapMutations } from 'vuex'
-    import axios from 'axios'
     import flatpickr from 'flatpickr'
     import { German } from 'flatpickr/dist/l10n/de'
-    import FormGroup from './components/FormGroup';
+    import FormGroup from './components/FormGroup'
+    import authenticatedClient from "../api";
 
 	export default {
 	    components: {
@@ -104,7 +104,7 @@
 	        ...mapMutations(['alert', 'beginLoading', 'endLoading']),
             loadFormOptions () {
                 this.beginLoading();
-                return axios({
+                return authenticatedClient({
                         url: '/api/countries',
                     }).then(response => {
                         this.countries = response.data

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/App.vue

@@ -62,7 +62,6 @@
             ...mapGetters(['isLoggedIn', 'isTeamer'])
         },
         mounted () {
-            this.$store.commit('initSession');
             if (this.isLoggedIn) {
                 this.$router.push({ name: 'address' })
             }

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/CrmData.vue

@@ -44,7 +44,7 @@
 
 <script>
     import { mapState, mapMutations } from 'vuex'
-    import axios from 'axios'
+    import authenticatedClient from '../api'
 
     export default {
         data () {
@@ -57,7 +57,7 @@
         created () {
             this.beginLoading();
 
-            return this.getClient().get('/api/crm-selections')
+            return authenticatedClient.get('/api/crm-selections')
                 .then(response => {
                     this.crmData = response.data
                 }).catch(error => {
@@ -71,17 +71,10 @@
         },
         methods: {
             ...mapMutations(['beginLoading', 'endLoading', 'alert']),
-            getClient () {
-                return axios.create({
-                    headers: {
-                        'Authorization': 'Bearer ' + this.authToken
-                    }
-                });
-            },
             save () {
                 this.beginLoading();
 
-                return this.getClient().put('/api/crm-selections', this.crmData)
+                return authenticatedClient.put('/api/crm-selections', this.crmData)
                     .then(() => {
                         this.alert({
                             message: 'Die Änderungen wurden gespeichert',
@@ -112,7 +105,7 @@
             }
         },
         computed: {
-            ...mapState(['loading', 'authToken'])
+            ...mapState(['loading'])
         }
     }
 </script>

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Events.vue

@@ -43,7 +43,7 @@
 
 <script>
     import { mapState, mapMutations } from 'vuex'
-    import axios from 'axios'
+    import authenticatedClient from "../api";
     import dayjs from 'dayjs'
     import 'dayjs/locale/de'
 
@@ -63,13 +63,7 @@
         created () {
             this.beginLoading();
 
-            const client = axios.create({
+            return authenticatedClient.get('/api/events')
-                headers: {
-                    'Authorization': 'Bearer ' + this.authToken
-                }
-            });
-
-            return client.get('/api/events')
                 .then(response => {
                     this.events = response.data;
                 }).catch(error => {
@@ -94,7 +88,7 @@
                     + '/api/events/'
                     + event.id
                     + '/' + type + '?token='
-                    + this.authToken;
+                    + sessionStorage.getItem('token');
             },
             calculateBalance (event) {
                 if (!event.preis || !event.zahlung) {
@@ -111,7 +105,7 @@
             }
         },
         computed: {
-	        ...mapState(['config', 'loading', 'authToken'])
+	        ...mapState(['config', 'loading'])
         }
     }
 </script>

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Newsletter.vue

@@ -16,7 +16,7 @@
 
 <script>
     import { mapState, mapMutations } from 'vuex'
-    import axios from 'axios'
+    import authenticatedClient from "../api";
 
 	export default {
         methods: {
@@ -32,13 +32,7 @@
 
                 this.beginLoading();
 
-                const client = axios.create({
+                return authenticatedClient.put('/api/newsletter', data)
-                    headers: {
-                        'Authorization': 'Bearer ' + this.authToken
-                    }
-                });
-
-                return client.put('/api/newsletter', data)
                     .then(() => {
                         this.alert({
                             message: 'Die Änderungen wurden gespeichert',
@@ -56,7 +50,7 @@
             }
         },
         computed: {
-	        ...mapState(['loading', 'userData', 'authToken']),
+	        ...mapState(['loading', 'userData']),
             statusMessage () {
                 let message = 'Du bist aktuell';
                 message += this.userData.newsletter ? ' ' : ' <strong>nicht</strong> ';

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Teamer.vue

@@ -84,7 +84,7 @@
 
 <script>
     import { mapState, mapMutations } from 'vuex'
-    import axios from 'axios'
+    import authenticatedClient from "../api";
     import dayjs from 'dayjs'
     import 'dayjs/locale/de'
     import FormGroup from './components/FormGroup';
@@ -107,13 +107,6 @@
         },
         methods: {
             ...mapMutations(['beginLoading', 'endLoading', 'alert']),
-            getClient () {
-                return axios.create({
-                    headers: {
-                        'Authorization': 'Bearer ' + this.authToken
-                    }
-                });
-            },
             save () {
                 const data = {
                     abilities: this.userData.abilities,
@@ -128,7 +121,7 @@
 
                 this.beginLoading();
 
-                return this.getClient().put('/api/teamer-data', data)
+                return authenticatedClient.put('/api/teamer-data', data)
                     .then(() => {
                         this.alert({
                             message: 'Die Änderungen wurden gespeichert',
@@ -147,7 +140,7 @@
         created () {
             this.beginLoading();
 
-            return this.getClient().get('/api/teamer-data')
+            return authenticatedClient.get('/api/teamer-data')
                 .then(response => {
                     this.abilities = response.data.abilities;
                     this.timeFrames = response.data.timeFrames;
@@ -158,7 +151,7 @@
                 });
         },
         computed: {
-            ...mapState(['userData', 'loading', 'authToken'])
+            ...mapState(['userData', 'loading'])
         },
         filters: {
             period (timeFrame) {

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import axios from 'axios'
+import authenticatedClient from "../api";
 
 Vue.use(Vuex);
 
@@ -25,6 +26,7 @@ export default new Vuex.Store({
         config: {},
         loading: false,
         authToken: null,
+        refreshToken: null,
         userData: defaultUserData,
         alert: {
             message: '',
@@ -57,14 +59,18 @@ export default new Vuex.Store({
             data.watchList = [...state.userData.watchList, ...data.watchList];
             state.userData = data;
         },
-        login(state, token) {
+        login(state, data) {
-            state.authToken = token;
+            state.authToken = data.token;
-            sessionStorage.setItem('token', token);
+            state.refreshToken = data.refresh_token;
+            sessionStorage.setItem('token', data.token);
+            sessionStorage.setItem('refreshToken', data.refresh_token);
         },
         logout(state) {
-            state.authToken = null;
             state.userData = defaultUserData;
+            state.authToken = null;
+            state.refreshToken = null;
             sessionStorage.removeItem('token');
+            sessionStorage.removeItem('refreshToken');
             sessionStorage.removeItem('watchlist');
         },
         alert(state, payload) {
@@ -97,7 +103,7 @@ export default new Vuex.Store({
                 },
                 withCredentials: true
             }).then(response => {
-                commit('login', response.data.token);
+                commit('login', response.data);
             }).catch(error => {
                 commit('logout');
                 commit('alert', {
@@ -109,14 +115,10 @@ export default new Vuex.Store({
                 commit('endLoading');
             });
         },
-        logout({commit, state}) {
+        logout({commit}) {
             commit('beginLoading');
-            const client = axios.create({
+
-                headers: {
+            return authenticatedClient({
-                    'Authorization': 'Bearer ' + state.authToken,
-                }
-            });
-            return client({
                 url: '/api/logout'
             }).catch(error => {
             }).finally(() => {
@@ -164,13 +166,7 @@ export default new Vuex.Store({
         loadAddress({commit, state}) {
             commit('beginLoading');
 
-            const client = axios.create({
+            return authenticatedClient.get('/api/address')
-                headers: {
-                    'Authorization': 'Bearer ' + state.authToken,
-                }
-            });
-
-            return client.get('/api/address')
                 .then(response => {
                     commit('setUserData', response.data);
                     if (response.data.watchlist) {
@@ -188,13 +184,7 @@ export default new Vuex.Store({
         saveAddress({commit, state}, data) {
             commit('beginLoading');
 
-            const client = axios.create({
+            return authenticatedClient.put('/api/address', data)
-                headers: {
-                    'Authorization': 'Bearer ' + state.authToken,
-                }
-            });
-
-            return client.put('/api/address', data)
                 .then(() => {
                     commit('alert', {
                         message: 'Die Änderungen wurden gespeichert',
@@ -217,7 +207,7 @@ export default new Vuex.Store({
     },
     getters: {
         watchlistCount: state => state.userData.watchList.length,
-        onWatchlist: (state) => (uid) => state.userData.watchList.indexOf(uid) !== -1,
+        onWatchlist: state => uid => state.userData.watchList.indexOf(uid) !== -1,
         isLoggedIn: state => !!state.authToken,
         isTeamer: state => !!state.userData.isTeamer
     }