How can I open current session in new tab? - vue.js

Question

When I open any link in my app in new tab I get on auth page. Other words current user session reset. I use JWT auth, my front-end developed on Vue.js. I've saved token in my cookies like this:
After hit any link in new tab (middle click or ctrl+click) I still have token in my cookie but I get on page auth:
How can I fix it? I need save current session during click link in new tab.
Why does it happen if my cookies have user token?
My auth mutations looks like:
export const mTypes = {
UPDATE_TOKEN: 'UPDATE_TOKEN',
CLEAR_TOKEN: 'CLEAR_TOKEN',
UPDATE_USER_INFO: 'UPDATE_USER_INFO',
UPDATE_USER_STATUS: 'UPDATE_USER_STATUS',
};
export const mutations = {
[mTypes.CLEAR_TOKEN](state) {
state.username = null;
toStorage(savingValues.token, 'remove');
},
[mTypes.UPDATE_TOKEN](state, token) {
state.token = token.exp;
toStorage(savingValues.token, token.exp);
},
[mTypes.UPDATE_USER_INFO](state, userInfo) {
state.email = userInfo.email;
state.id = userInfo.user_id;
toStorage(savingValues.id, userInfo.user_id);
state.username = userInfo.username;
toStorage(savingValues.username, userInfo.username);
toStorage(savingValues.token, userInfo.exp);
},
[mTypes.UPDATE_USER_STATUS](state, user) {
state.isTeacher = user.type !== 's';
toStorage(savingValues.isTeacher, state.isTeacher);
state.isStaff = user.type === 'e';
toStorage(savingValues.isStaff, state.isStaff);
state.firstName = user.first_name;
toStorage(savingValues.firstName, user.first_name);
state.lastName = user.last_name;
toStorage(savingValues.lastName, user.last_name);
},
};
My actions auth looks like:
export const aTypes = {
login: 'auth/login',
logout: 'auth/logout',
refresh: 'auth/refresh',
updateUserStatus: 'auth/updateUserStatus',
inspectToken: 'auth/inspectToken',
};
export const actions = {
async login(cntx, {username, pswd, vm}) {
/**
* Logs in user: creates new token and saves personal user information
* #param {string} username
* #param {string} pswd
* #param {Object} vm Vue instance
*/
try {
dispatch(cntx, appActions.startLoading);
let data = {};
await api.login(username, pswd)
.then(response => {
data = response.data;
vm.$connect();
});
cntx.commit(mutations.UPDATE_USER_INFO, jwt_decode(data.token));
await dispatch(cntx, aTypes.updateUserStatus, vm);
if (fromStorage('isStaff') === true) {
await router.push('/Stat');
} else {
await router.push('/Dashboard');
}
} catch (e) {
callErrorNotify(vm, vm.$t('loginError'), e, 5);
} finally {
dispatch(cntx, appActions.stopLoading);
}
},
async updateUserStatus(cntx, {vm}) {
/**
* Gets and saves personal user information
* #param {Object} vm Vue instance
*/
try {
dispatch(cntx, appActions.startLoading);
const {data} = await api.getFullUserInfo(cntx.getters.id);
cntx.commit(mutations.UPDATE_USER_STATUS, data);
if (localStorage.getItem(`tour_${data.id}_${data.username}`) === null) {
initialTourSettings(data);
}
if (data.type === 't') {
await dispatch(cntx, wsActions.createTeacherChannel);
}
} catch (e) {
callErrorNotify(vm, vm.$t('loadError'), e, 5);
} finally {
dispatch(cntx, appActions.stopLoading);
}
},
async logout(cntx, {vm}) {
/**
* Logs out user: delete its token from store and session storage.
* #param {Object} vm Vue instance
*/
try {
dispatch(cntx, appActions.startLoading);
cntx.commit(mutations.CLEAR_TOKEN);
if (cntx.state.isTeacher) {
await dispatch(cntx, wsActions.closeTeacherChannel);
}
sessionStorage.clear();
await router.push('/Auth').catch(err => {
if (err.name !== 'NavigationDuplicated') {
console.log('Navigation duplicated: /Auth');
}});
} catch (e) {
callErrorNotify(vm, vm.$t('logoutError'), e, 5);
} finally {
dispatch(cntx, appActions.stopLoading);
}
},
async refresh(cntx, {token, vm}) {
/**
* Refreshes user token.
* #param {string} token
* #param {Object} vm Vue instance
*/
try {
dispatch(cntx, appActions.startLoading);
const {data} = await api.refresh(token);
cntx.commit(mutations.UPDATE_TOKEN, jwt_decode(data.token));
console.log('token was updated');
return true;
} catch (e) {
callErrorNotify(vm, vm.$t('tokenUpdateError'), e, 5);
return false;
} finally {
dispatch(cntx, appActions.stopLoading);
}
},
async inspectToken(cntx, {vm}) {
/**
* Checks whether it needed to update token every 30 minutes.
* #param {Object} vm Vue instance
*/
try {
let token = fromStorage(savingValues.token);
if (!!token) {
// 60s*50 = 3000s == 50 minutes
const delta = new Date(token * 1000) - new Date();
if (delta < 0) {
await dispatch(cntx, aTypes.logout, {vm});
return;
}
if (delta / 1000 <= 3000) {
await dispatch(cntx, aTypes.refresh, {token, vm});
}
} else {
await dispatch(cntx, aTypes.logout, {vm});
}
} catch (e) {
console.log('error during inspectToken. ' + e);
await dispatch(cntx, aTypes.logout, {vm});
}
},
};
And finally my component looks like this:
#Component
export default class App extends Vue {
valid = false;
username = '';
pswd = '';
get pswdRules() {
return [
(v) => !!v || this.$t('passwordRequired'),
]
}
get usernameRules() {
return [
(v) => !!v || this.$t('loginRequired'),
]
}
get isDarkTheme() {
return this.$store.getters[appGetters.isDarkTheme];
}
get primary() {
return colors.primary;
}
get neonBlue() {
return colors.neonBlue;
}
get language() {
return i18n.locale;
}
#Watch('language')
onLanguageChanged(val) {
this.$refs.form.resetValidation();
}
login() {
if (this.$refs.form.validate()) {
this.$store.dispatch(
authActions.login,
{
username: this.username,
pswd: this.pswd,
vm: this
}
)
}
}
mounted() {
this.$disconnect();
}
}