Implement forced logout on api errors
This commit is contained in:
@@ -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&P<img :src="loaderUrl" alt="" v-if="loading"></h1>
|
||||
<h1>Login MyE&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;
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user