add an auto logout
This commit is contained in:
parent
b5f3c6f871
commit
eddcdd1755
12
src/App.vue
12
src/App.vue
|
@ -14,8 +14,20 @@ export default {
|
||||||
components: {
|
components: {
|
||||||
TheHeader
|
TheHeader
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
didAutoLogout() {
|
||||||
|
return this.$store.getters.didAutoLogout;
|
||||||
|
}
|
||||||
|
},
|
||||||
created() {
|
created() {
|
||||||
this.$store.dispatch('tryLogin');
|
this.$store.dispatch('tryLogin');
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
didAutoLogout(curValue, oldValue) {
|
||||||
|
if (curValue && curValue !== oldValue) {
|
||||||
|
this.$router.replace('/coaches');
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,5 +1,7 @@
|
||||||
import getAuth from '../../../scripts/axios-auth';
|
import getAuth from '../../../scripts/axios-auth';
|
||||||
|
|
||||||
|
let timer;
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
async login(context, payload) {
|
async login(context, payload) {
|
||||||
return context.dispatch('auth', {
|
return context.dispatch('auth', {
|
||||||
|
@ -27,13 +29,20 @@ export default {
|
||||||
});
|
});
|
||||||
const responseData = response.data;
|
const responseData = response.data;
|
||||||
|
|
||||||
|
const expiresIn = +responseData.expiresIn * 1000;
|
||||||
|
const expirationDate = new Date().getTime() + expiresIn;
|
||||||
|
|
||||||
localStorage.setItem('token', responseData.idToken);
|
localStorage.setItem('token', responseData.idToken);
|
||||||
localStorage.setItem('userId', responseData.localId);
|
localStorage.setItem('userId', responseData.localId);
|
||||||
|
localStorage.setItem('tokenExpiration', expirationDate);
|
||||||
|
|
||||||
|
timer = setTimeout(function() {
|
||||||
|
context.dispatch('autoLogout');
|
||||||
|
}, expiresIn);
|
||||||
|
|
||||||
context.commit('setUser', {
|
context.commit('setUser', {
|
||||||
token: responseData.idToken,
|
token: responseData.idToken,
|
||||||
userId: responseData.localId,
|
userId: responseData.localId
|
||||||
tokenExpiration: responseData.expiresIn
|
|
||||||
});
|
});
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
const error = new Error(err.message);
|
const error = new Error(err.message);
|
||||||
|
@ -43,20 +52,39 @@ export default {
|
||||||
tryLogin(context) {
|
tryLogin(context) {
|
||||||
const token = localStorage.getItem('token');
|
const token = localStorage.getItem('token');
|
||||||
const userId = localStorage.getItem('userId');
|
const userId = localStorage.getItem('userId');
|
||||||
|
const tokenExpiration = localStorage.getItem('tokenExpiration');
|
||||||
|
|
||||||
|
const expiresIn = +tokenExpiration - new Date().getTime();
|
||||||
|
|
||||||
|
if (expiresIn < 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(function() {
|
||||||
|
context.dispatch('autoLogout');
|
||||||
|
}, expiresIn);
|
||||||
|
|
||||||
if (token && userId) {
|
if (token && userId) {
|
||||||
context.commit('setUser', {
|
context.commit('setUser', {
|
||||||
token: token,
|
token: token,
|
||||||
userId: userId,
|
userId: userId
|
||||||
tokenExpiration: null
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
logout(context) {
|
logout(context) {
|
||||||
|
localStorage.removeItem('token');
|
||||||
|
localStorage.removeItem('userId');
|
||||||
|
localStorage.removeItem('tokenExpiration');
|
||||||
|
|
||||||
|
clearTimeout(timer);
|
||||||
|
|
||||||
context.commit('setUser', {
|
context.commit('setUser', {
|
||||||
token: null,
|
token: null,
|
||||||
userId: null,
|
userId: null
|
||||||
tokenExpiration: null
|
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
autoLogout(context) {
|
||||||
|
context.dispatch('logout');
|
||||||
|
context.commit('setAutoLogout');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -7,5 +7,8 @@ export default {
|
||||||
},
|
},
|
||||||
isAuthenticated(state) {
|
isAuthenticated(state) {
|
||||||
return !!state.token;
|
return !!state.token;
|
||||||
|
},
|
||||||
|
didAutoLogout(state) {
|
||||||
|
return state.didAutoLogout;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -7,7 +7,7 @@ export default {
|
||||||
return {
|
return {
|
||||||
userId: null,
|
userId: null,
|
||||||
token: null,
|
token: null,
|
||||||
tokenExpiration: null
|
didAutoLogout: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
actions,
|
actions,
|
||||||
|
|
|
@ -2,6 +2,9 @@ export default {
|
||||||
setUser(state, payload) {
|
setUser(state, payload) {
|
||||||
state.token = payload.token;
|
state.token = payload.token;
|
||||||
state.userId = payload.userId;
|
state.userId = payload.userId;
|
||||||
state.tokenExpiration = payload.tokenExpiration;
|
state.didAutoLogout = false;
|
||||||
|
},
|
||||||
|
setAutoLogout(state) {
|
||||||
|
state.didAutoLogout = true;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Reference in New Issue