tobias/lrc-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

updated Repository.js to use actual access token (interceptor)

Browse Source
This commit is contained in:
Tobias
2019-04-15 14:16:53 +02:00
parent 98f5d3f39b
commit fccf120950
5 changed files with 82 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/api/Repository.js
View File

@@ -8,13 +8,56 @@ const baseDomain = "http://localhost:5443";
const API_URL = `${baseDomain}/api/v1`;
const api = axios.create({
baseURL: API_URL, headers: { Authorization: `Bearer ${store.state.access_token}` },
baseURL: API_URL,
});
api.interceptors.request.use(async function(config) {
if (store.getters.isAuthenticated) {
const token = store.state.access_token;
config.headers.Authorization = `Bearer ${token}`;
return config;
} else {
Vue.$log.warn("the access_token is not valid anymore.");
if(store.getters.isRefreshTokenValid){
await store.dispatch('refreshToken');
const token = store.state.access_token;
config.headers.Authorization = `Bearer ${token}`;
/*store.dispatch('refreshToken').then( () => {
const token = store.state.access_token;
config.headers.Authorization = `Bearer ${token}`;
}).catch( () => {
Vue.$log.error("Could not refresh tokens!");
window.location = '/login';
});*/
} else {
Vue.swal({
title: "Session Expired",
text: "Your token/session has expired. Would you like to be redirected to the login page?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes",
}).then( (result) => {
if(result.value) {
Vue.$log.info("redirect to login!");
window.location = '/login';
} else {
Vue.$log.info("redirect to home!");
window.location = '/';
}
});
}
return config;
}
});
api.interceptors.response.use(function (response) {
Vue.$log.debug("Token OK: " + store.state.access_token);
return response;
}, function (error) {
if (401 === error.response.status) {
if (401 === error.response.status || 422 === error.response.status) {
Vue.$log.warn("Invalid / no access token?!");
Vue.$log.debug(store.state.access_token);
Vue.swal({
title: "Session Expired",
text: "Your token/session has expired. Would you like to be redirected to the login page?",
@@ -24,10 +67,10 @@ api.interceptors.response.use(function (response) {
confirmButtonText: "Yes",
}).then( (result) => {
if(result.value) {
console.log("redirect to login!");
Vue.$log.info("redirect to login!");
window.location = '/login';
} else {
console.log("redirect to home!");
Vue.$log.info("redirect to home!");
window.location = '/';
}
});

2
src/api/index.ts
View File

@@ -34,7 +34,7 @@ export function oidc_login(redirectionUrl: any) {
}
export function getFreshToken(refreshToken: any) {
return axios.get(`${API_URL}/auth/fresh`, refreshToken);
return axios.get(`${API_URL}/auth/refresh`, { headers: { Authorization: `Bearer ${refreshToken}` } });
}
export function getProviders() {

16
src/components/User.vue
View File

@@ -47,9 +47,9 @@
</template>
<script>
import { EventBus } from '@/utils'
import {getRemainingJwtValiditySeconds} from "../utils";
import { RepositoryFactory} from "@/api/RepositoryFactory";
import { EventBus } from '@/utils';
import {getRemainingJwtValiditySeconds} from '../utils';
import { RepositoryFactory} from '@/api/RepositoryFactory';
const UserRepository = RepositoryFactory.get('user');
export default {
@@ -60,7 +60,7 @@
errorMsg: '',
sortColumn: '',
currentPage: 1,
elementsPerPage: 5
elementsPerPage: 5,
};
},
methods: {
@@ -68,7 +68,7 @@
this.isLoading = true;
// const { data } = await GroupRepository.get();
UserRepository.getUsers()
.then(response => {
.then( (response) => {
this.users = response.data;
this.isLoading = false;
this.$log.debug(response);
@@ -76,8 +76,8 @@
},
get_rows() {
var start = (this.currentPage-1) * this.elementsPerPage;
var end = start + this.elementsPerPage;
let start = (this.currentPage-1) * this.elementsPerPage;
let end = start + this.elementsPerPage;
return this.users.slice(start, end);
},
num_pages() {
@@ -94,7 +94,7 @@
this.sortColumn = col;
}
var ascending = this.ascending;
let ascending = this.ascending;
this.users.sort(function(a, b) {
if (a[col] > b[col]) {

2
src/main.ts
View File

@@ -26,7 +26,7 @@ const options = {
showLogLevel : true,
showMethodName : true,
separator: '|',
showConsoleColors: true
showConsoleColors: true,
};
Vue.use(VueLogger, options);

46
src/store.ts
View File

@@ -1,6 +1,6 @@
import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate'
import createPersistedState from 'vuex-persistedstate';
// imports of AJAX functions will go here
import {
@@ -207,30 +207,34 @@ const mutations = {
},
setTokens(sState: any, payload: any) {
Vue.$log.debug('setTokens payload = ', payload);
sState.access_token = payload.tokens.access_token;
sState.refresh_token = payload.tokens.refresh_token;
Vue.$log.debug(sState.access_token);
Vue.$log.debug(sState.access_token);
if(payload.tokens.access_token){
sState.access_token = payload.tokens.access_token;
}
if(payload.tokens.refresh_token){
sState.refresh_token = payload.tokens.refresh_token;
}
Vue.$log.debug('access_token: ' + sState.access_token);
Vue.$log.debug('refresh_token: ' + sState.refresh_token);
},
};
const getters = {
// reusable data accessors
isAuthenticated(sState: any) {
const valid = isValidJwt(sState.access_token);
Vue.$log.debug('Access token is valid?: ', valid);
Vue.$log.debug(sState.access_token);
return valid;
},
isRefreshTokenValid(sState: any) {
const valid = isValidJwt(sState.refresh_token);
Vue.$log.debug('Refresh token is valid?: ', valid);
Vue.$log.debug(sState.refresh_token);
return valid;
},
getLoginProviders(sState: any) {
return sState.loginProviders;
},
// reusable data accessors
isAuthenticated(sState: any) {
const valid = isValidJwt(sState.access_token);
Vue.$log.debug('Access token is valid?: ', valid);
Vue.$log.debug(sState.access_token);
return valid;
},
isRefreshTokenValid(sState: any) {
const valid = isValidJwt(sState.refresh_token);
Vue.$log.debug('Refresh token is valid?: ', valid);
Vue.$log.debug('sState.refresh_token');
return valid;
},
getLoginProviders(sState: any) {
return sState.loginProviders;
},
};
const store = new Vuex.Store({