Использование JWT и сохранение его в storage небезопасно.
https://www.rdegges.com/2018/please-stop-using-loc...
Предпочтительнее все-таки использовать куки. В
MDN подробно описано как их использовать для хранения сессий.
Со стороны Vue все достаточно просто:
1. Создаем переменную в store и храним в ней состояние наличия установленной куки.
2. Для разделения доступа к роутам используем guard, вроде этого:
const authGuard = (to, from, next) => {
if (store.getters.isAuthenticated) {
next();
return;
}
next('/login');
}
const router = new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/account',
name: 'Account',
component: Account,
beforeEnter: authGuard,
},
});
3. При завершении сессии удаляем куку.
Простой