Where to check the validity of the token before each fetch api call?

Question

Vue.js

Время сессии 1-2 часа, когда токен истекает его надо сбросить на клиенте.
На данный момент когда юзер пытается сделать запрос с невалидным токеном по дате ему приходит 500.
Вариант лепить проверки в каждом методе исключаем как и вариант с проверкой текста ошибки и подобных привязок.
Стек, vue 2 + fetch

Как и где бы вы проверяли валидность текущей сессии, токена на клиента перед отправкой на бек для возможности регенерации токена?

пс, сейчас юзеру надо перезагрузить страницу и тогда сработает beforeRouteEnter аля middleware, guard где идет проверка.
Но недостаток подхода в том что юзеру надо все же сделать перезагрузку страницы что контринтуитивно.
В SPA сами понимаете перезагрузка страницы только мануально, ведь мы просто загружаем и выгружаем компонент.
Хотелось бы слушатель пере каждый запросом мы ведь все-равно отправляем токен, проверить его валидность, если он невалиден то смысла запроса нет, все-равно 500 будет, а потому очищаем стейты и делаем реаутентификацию как анонимуса. Это будет более юзер френдли.

Answer 1

Во-первых код должен быть 401.
Во-вторых посмотрите как у axios сделаны интерцепторы и напишите маленькую обёртку над fetch и там уже проверяйте что надо.
А вообще если используется refresh token, то надо не разлогинивать юзера, а обновлять access token.
Ну или тупо в setInterval засунуть запрос обновления токена.
Вариантов куча.