Salut,
Alors pour répondre à ta question de façon rapide, tu peux toujours utiliser les sessions côté navigateur, grace à la variable globale "sessionStorage"
Ici la doc: https://developer.mozilla.org/fr/docs/Web/API/Window/sessionStorage
(Fonctionne même sous ie8 lol)
Bref, du coup ce que je te conseille de faire, c'est de checker lorsque l'utilisateur recharge la page, s'il y a un token dans le sessionStorage, tu utilises celui ci dans ton app vueJs (à toi de voir si tu le socke dans un store avec vueX, ou simplement un objet global à ton appli).
Dans le cas contraire s'il n'a pas de token, tu peux le rediriger vers la page login ou autre...
Voici un example de code que j'utilise avec VueJS 2:
(J'utilise un systeme de routes white-listés, toutes les autres seront redirigées vers la page login);
Ensuite, à la fin, juste avant de monter l'application globale, je fais un petit checkAuth(), qui va regarder si oui ou non j'ai un token dans mon sessionStorage.
Ensuite, juste avant de faire tes appels apis, tu peux récupérer ce token et l'envoyer avec tes requetes, dans mon cas par exemple, j'utilise la libraire axios, et j'assigne mon token de façon globale à toutes mes requêtes de la manière suivante :
(auth.getToken() récupère just le token en session)
axios.defaults.headers.common['Authorization'] = auth.getToken();
Ps: si tu veux des sessions persistentes, tu peux toujours utiliser le localStorage, qui lui ne sera pas effacé lorsque l'utilisateur ferme son navigateur, oui le sessionStorage est effacé à la fermeture, à toi de voir donc).
Si jamais par sécurité, tu veux annuler un token, tu peux regarder du côté de la librairie: (A faire au moment du logout donc)
https://www.npmjs.com/package/express-jwt-blacklist
Hésites pas si tu as des questions sur le code !
var whitelist = [
'/activation',
'/login',
'/register'
];
router.beforeEach( (to, from, next) =>
{
if(to.path.match(/admin/) && auth.user.profile.role != 'admin')
{
next({path: '/'});
return
}
if(to.path.match(/activation/))
next();
else {
if(whitelist.indexOf(to.path) == -1 && !auth.isAuth())
{
next({
path: '/login',
query: {redirect: to.fullPath}
});
}
else
next()
}
});
auth.checkAuth( _=>
{
new Vue(Vue.util.extend(
{
router,
store
},
require('./App.vue'))
)
.$mount('#app');
});
