Implement forced logout on api errors

This commit is contained in:
Björn Fromme
2018-10-19 17:39:56 +02:00
parent b496d17c2e
commit b70d95b14c
6 changed files with 87 additions and 96 deletions
@@ -1,12 +1,28 @@
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import EventBus from '../_bus'
const configElement = document.getElementById('appconfig');
const config = JSON.parse(configElement.innerHTML);
axios.defaults.headers.common['Accept'] = 'application/json';
axios.defaults.headers.put['Content-Type'] = 'application/json';
axios.defaults.baseURL = config.myEpApiBaseUrl;
const createAuthenticatingClient = () => {
return axios.create({
headers: {
'X-Auth-Token': sessionStorage.getItem('token')
},
});
};
Vue.use(Vuex);
export default new Vuex.Store({
state: {
config: {},
config: config,
loading: false,
loggedIn: !!sessionStorage.getItem('token'),
countries: []
@@ -29,9 +45,6 @@ export default new Vuex.Store({
},
setCountries (state, countries) {
state.countries = countries;
},
setConfig (state, config) {
state.config = config;
}
},
actions: {
@@ -89,81 +102,82 @@ export default new Vuex.Store({
},
loadAddress ({ commit }) {
commit('loadingBegin');
return axios({
url: '/api/addresses',
headers: {
'x-auth-token': sessionStorage.getItem('token')
}
}).then((response) => {
commit('loadingFinish');
return response.data[0];
}).catch((error) => {
commit('loadingFinish');
throw error;
});
const client = createAuthenticatingClient();
return client.get('/api/addresses')
.then((response) => {
commit('loadingFinish');
return response.data[0];
}).catch((error) => {
commit('loadingFinish');
commit('logout');
EventBus.$emit('forcedLogout');
throw error;
});
},
saveAddress ({ commit }, data) {
commit('loadingBegin');
return axios({
url: '/api/addresses/' + data.id,
headers: {
'x-auth-token': sessionStorage.getItem('token')
},
method: 'PUT',
data: data
}).then(() => {
commit('loadingFinish');
})
.catch((error) => {
commit('loadingFinish');
throw error;
});
const client = createAuthenticatingClient();
return client.put('/api/addresses/' + data.id, data)
.then(() => {
commit('loadingFinish');
})
.catch((error) => {
commit('loadingFinish');
commit('logout');
EventBus.$emit('forcedLogout');
throw error;
});
},
loadEvents ({ commit }) {
commit('loadingBegin');
return axios({
url: '/api/events',
headers: {
'x-auth-token': sessionStorage.getItem('token')
}
}).then((response) => {
const client = createAuthenticatingClient();
return client.get('/api/events')
.then((response) => {
commit('loadingFinish');
return response.data;
}).catch((error) => {
commit('loadingFinish');
commit('logout');
EventBus.$emit('forcedLogout');
throw error;
});
},
loadCrmData ({ commit }) {
commit('loadingBegin');
return axios({
url: '/api/crm-selections',
headers: {
'x-auth-token': sessionStorage.getItem('token')
}
}).then((response) => {
commit('loadingFinish');
return response.data[0];
}).catch((error) => {
commit('loadingFinish');
throw error;
});
const client = createAuthenticatingClient();
return client.get('/api/crm-selections')
.then((response) => {
commit('loadingFinish');
return response.data[0];
}).catch((error) => {
commit('loadingFinish');
commit('logout');
EventBus.$emit('forcedLogout');
throw error;
});
},
saveCrmData ({ commit }, data) {
commit('loadingBegin');
return axios({
url: '/api/crm-selections/' + data.id,
headers: {
'x-auth-token': sessionStorage.getItem('token')
},
method: 'PUT',
data: data
}).then(() => {
commit('loadingFinish');
}).catch((error) => {
commit('loadingFinish');
throw error;
});
const client = createAuthenticatingClient();
return client.put('/api/crm-selections/' + data.id, data)
.then(() => {
commit('loadingFinish');
}).catch((error) => {
commit('loadingFinish');
commit('logout');
EventBus.$emit('forcedLogout');
throw error;
});
}
},
getters: {
@@ -7,7 +7,7 @@
</button>
{{ message }}
</div>
<img :src="loaderUrl" alt="" v-show="loading">
<img :src="$store.state.config.loaderUrl" alt="" v-show="loading">
<div class="row" v-show="!loading">
<form @submit.prevent="saveAddress()">
<div class="col-xs-12 col-md-6">
@@ -69,7 +69,7 @@
Land:
</label>
<select id="country" v-model="address.country" class="form-control">
<option v-for="country in countries" :value="country.code">{{ country.name }}</option>
<option v-for="country in $store.state.countries" :value="country.code">{{ country.name }}</option>
</select>
</div>
</div>
@@ -143,12 +143,6 @@
}
},
computed: {
loaderUrl () {
return this.$store.state.config.loaderUrl;
},
countries () {
return this.$store.state.countries;
},
loading () {
return this.$store.state.loading;
}
@@ -11,20 +11,9 @@
</template>
<script>
const configElement = document.getElementById('appconfig');
const config = JSON.parse(configElement.innerHTML);
import axios from 'axios';
axios.defaults.headers.common['Accept'] = 'application/json';
axios.defaults.headers.put['Content-Type'] = 'application/json';
axios.defaults.baseURL = config.myEpApiBaseUrl;
import store from '../_store'
store.commit('setConfig', config);
import router from '../_router'
import EventBus from '../../_bus'
export default {
store,
@@ -50,6 +39,9 @@
},
created () {
this.$store.dispatch('loadCountries');
EventBus.$on('forcedLogout', () => {
this.$router.push({ name: 'login' })
});
}
}
</script>
@@ -7,7 +7,7 @@
</button>
{{ message }}
</div>
<img :src="loaderUrl" alt="" v-if="loading">
<img :src="$store.state.config.loaderUrl" alt="" v-if="loading">
<div class="row" v-if="loaded">
<div class="col-xs-12 col-md-6">
<h2>Selektionsmerkmale</h2>
@@ -84,9 +84,6 @@
}
},
computed: {
loaderUrl () {
return this.$store.state.config.loaderUrl;
},
loading () {
return this.$store.state.loading;
}
@@ -7,7 +7,7 @@
</button>
{{ message }}
</div>
<img :src="loaderUrl" alt="" v-if="loading">
<img :src="$store.state.config.loaderUrl" alt="" v-if="loading">
<div class="table-responsive" v-if="!loading">
<table class="table table-striped table-condensed">
<thead>
@@ -89,9 +89,6 @@
}
},
computed: {
loaderUrl () {
return this.$store.state.config.loaderUrl;
},
loading () {
return this.$store.state.loading;
}
@@ -1,6 +1,6 @@
<template>
<div class="form-wrapper form--border col-xs-12 col-md-6" id="myep-main">
<h1>Login MyE&amp;P<img :src="loaderUrl" alt="" v-if="loading"></h1>
<h1>Login MyE&amp;P<img :src="$store.state.config.loaderUrl" alt="" v-if="loading"></h1>
<div v-if="message" class="alert" :class="messageClass">
{{ message }}
</div>
@@ -92,9 +92,6 @@
}
},
computed: {
loaderUrl () {
return this.$store.state.config.loaderUrl;
},
loading () {
return this.$store.state.loading;
},