Как проверить токен в JWT авторизации Vue
У меня вопрос, как сделать проверку токена и его обновление вначале всех действий vue.
Потому что на данный момент у меня это выполняется не последовательно, а асихронно. В итоге в момент когда создается интерфейс (запрашиваются данные по апи), так же идёт проверка токена.
Данные не пришли, потому что в момент запрашивания токен был старым.
Проблема пропадает, после смены пути или обновления страницы.
В данный момент я делаю проверку и перезапрос токена в route.before each. А так же делаю в App.vue в методе created.
Токен у меня живет 5 минут. Рефреш токен обновляется по апи.
Роутер:
router.beforeEach((to, from, next) => {
...
// Проверка токена существующего
if(loggedIn) {
// Если залогинен, проверить токен из хранилища
let jwt = store.getters['auth/token'];
let jwt_data = JSON.parse(atob(jwt.split('.')[1]));
if (Date.now() / 1000 >= jwt_data.exp) {
store.dispatch('auth/refreshtoken').then((res) => {
if(res.success) { return next('/') }
}).catch((err) => {
this.flashMessage.error({
title: 'Техническая ошибка',
message: 'Ошибка восстановления сессии. Обратитесь к администратору.'
})
})
}
} else {
// Если не залогинен, проверить refresh token
store.dispatch('auth/refreshtoken').then((res) => {
if(res.success) { return next('/') }
}).catch((err) => {
this.flashMessage.error({
title: 'Техническая ошибка',
message: 'Ошибка восстановления сессии. Обратитесь к администратору.'
})
})
}
...
})Store:
export const auth = {
namespaced: true,
state: initialState,
actions: {
refreshtoken({ commit }) {
return AuthService.refreshtoken().then(
res => {
if(res.success) {
commit('loginSuccess', res.user);
} else {
commit('loginFailure');
}
return Promise.resolve(res);
},
error => {
commit('loginFailure');
return Promise.reject(error);
}
);
},
},
mutations: {
loginSuccess(state, data) {
state.loggedIn = true;
state.username = data.name;
state.isAdmin = data.is_admin;
state.token = data.token;
},
loginFailure(state) {
state.loggedIn = false;
state.username = null;
state.isAdmin = false;
state.token = null;
},
},
getters: {
token: state => {
return state.token
},
loggedIn: state => {
return state.loggedIn
},
}
};App.vue
export default {
computed: {
loggedIn() {
return this.$store.getters['auth/loggedIn']
},
token() {
return this.$store.getters['auth/token']
},
},
created: function() {
// Проверка токена существующего
if(this.loggedIn) {
let jwt = this.token
let jwt_data = JSON.parse(atob(jwt.split('.')[1]));
if (Date.now() / 1000 >= jwt_data.exp) {
this.$store.dispatch('auth/refreshtoken').then((res) => {
if(res.success) { this.$router.push('/') }
}).catch((err) => {
this.flashMessage.error({
title: 'Техническая ошибка',
message: 'Ошибка восстановления сессии. Обратитесь к администратору.'
})
})
}
} else {
this.$store.dispatch('auth/refreshtoken').then((res) => {
if(res.success) { this.$router.push('/') }
}).catch((err) => {
this.flashMessage.error({
title: 'Техническая ошибка',
message: 'Ошибка восстановления сессии. Обратитесь к администратору.'
})
})
}
}
}