From 1ab7e7e105083e15e732a8fdbcdfaeceda8cd844 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <mail@bjo3rn.com>
Date: Thu, 3 Oct 2019 18:20:42 +0200
Subject: [PATCH] Implement token refreshing

---
 package-lock.json                             |  8 ++
 package.json                                  |  1 +
 .../Resources/Private/Assets/js/api/index.js  | 91 ++++---------------
 .../Private/Assets/js/myep/Address.vue        |  6 +-
 .../Resources/Private/Assets/js/myep/App.vue  |  1 -
 .../Private/Assets/js/myep/CrmData.vue        | 15 +--
 .../Private/Assets/js/myep/Events.vue         | 14 +--
 .../Private/Assets/js/myep/Newsletter.vue     | 12 +--
 .../Private/Assets/js/myep/Teamer.vue         | 15 +--
 .../Private/Assets/js/store/index.js          | 44 ++++-----
 10 files changed, 64 insertions(+), 143 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9e584981..d9231c7a 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 2151b2bc..44663abe 100644
--- a/package.json
+++ b/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",
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/api/index.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/api/index.js
index 12f1a1c8..bb8827ee 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/api/index.js
+++ b/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({
-    headers: {
-        'Authentication': 'Bearer ' + sessionStorage.getItem('token')
-    }
+const getAccessToken = () => {
+    return sessionStorage.getItem('token');
+};
+
+authenticatedClient.interceptors.request.use(request => {
+    request.headers['Authorization'] = 'Bearer ' + getAccessToken();
+    return request;
 });
 
-authenticatedClient.interceptors.response.use(
-    response => response,
-    error => {
-        const errorResponse = error.response;
-        if (isTokenExpiredError(errorResponse)) {
-            return resetTokenAndReattemptRequest(error)
-        }
-        return Promise.reject(error)
-    }
-);
+const refreshAuth = failedRequest => axios.post('/api/token_refresh', {
+        refresh_token: sessionStorage.getItem('refreshToken')
+    }).then(response => {
+        sessionStorage.setItem('token', response.data.token);
+        sessionStorage.setItem('refreshToken', response.data.refresh_token);
+        failedRequest.response.config.headers['Authorization'] = 'Bearer ' + response.data.token;
+        return Promise.resolve();
+    });
 
-function isTokenExpiredError (errorResponse) {
-    if (errorResponse.config.code !== 401) {
-        return false
-    }
+createAuthRefreshInterceptor(authenticatedClient, refreshAuth);
 
-    return errorResponse.message.match(/expired/);
-}
-
-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);
-}
+export default authenticatedClient
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Address.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Address.vue
index 36d67fc5..00d8e82f 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Address.vue
+++ b/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
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/App.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/App.vue
index 90c0e79c..14d96e30 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/App.vue
+++ b/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' })
             }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/CrmData.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/CrmData.vue
index 1e905daf..c1297ecd 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/CrmData.vue
+++ b/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>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Events.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Events.vue
index 3fcb2a7a..1b13ac15 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Events.vue
+++ b/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({
-                headers: {
-                    'Authorization': 'Bearer ' + this.authToken
-                }
-            });
-
-            return client.get('/api/events')
+            return authenticatedClient.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>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Newsletter.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Newsletter.vue
index 34dcb854..7c77b41a 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Newsletter.vue
+++ b/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({
-                    headers: {
-                        'Authorization': 'Bearer ' + this.authToken
-                    }
-                });
-
-                return client.put('/api/newsletter', data)
+                return authenticatedClient.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> ';
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Teamer.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Teamer.vue
index 3986a041..6efdc352 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Teamer.vue
+++ b/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) {
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/index.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/index.js
index 1116efcb..66acb98f 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/index.js
+++ b/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) {
-            state.authToken = token;
-            sessionStorage.setItem('token', token);
+        login(state, data) {
+            state.authToken = data.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: {
-                    'Authorization': 'Bearer ' + state.authToken,
-                }
-            });
-            return client({
+
+            return authenticatedClient({
                 url: '/api/logout'
             }).catch(error => {
             }).finally(() => {
@@ -164,13 +166,7 @@ export default new Vuex.Store({
         loadAddress({commit, state}) {
             commit('beginLoading');
 
-            const client = axios.create({
-                headers: {
-                    'Authorization': 'Bearer ' + state.authToken,
-                }
-            });
-
-            return client.get('/api/address')
+            return authenticatedClient.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({
-                headers: {
-                    'Authorization': 'Bearer ' + state.authToken,
-                }
-            });
-
-            return client.put('/api/address', data)
+            return authenticatedClient.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
     }