Merge branch 'release/2019.10-04'

This commit is contained in:
Björn Fromme
2019-10-03 18:22:55 +02:00
10 changed files with 64 additions and 143 deletions
+8
View File
@@ -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",
+1
View File
@@ -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",
@@ -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
@@ -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
@@ -62,7 +62,6 @@
...mapGetters(['isLoggedIn', 'isTeamer'])
},
mounted () {
this.$store.commit('initSession');
if (this.isLoggedIn) {
this.$router.push({ name: 'address' })
}
@@ -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>
@@ -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>
@@ -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> ';
@@ -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) {
@@ -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
}