Как лучше всего обновлять JWT токен в приложении на Vue?

Question

[Андрей]

Привет, сейчас впервые столкнулся с тем, чтобы использовать jwt так, как следует. До этого я использовал один токен без экспирации в тестовых приложениях.

Api предоставляет три роута для токена: create, verify и refresh. Задача: перед запросами, требующими токена, проверять валидность токена и обновлять его при необходимости.

Технически всё просто, и можно по быстрому захардкодить, однако, вопрос заключается в том, как лучше всего реализовать это внутри структуры Vue? У меня есть отдельно объект api, который содержит в себе все методы api с помощью axios, метод логина хранится во vuex, где вызывается api и сохраняется токен в localStorage.

Вызывать метод api внутри другого метода api кажется не очень разумным, да и получается громоздко:

const api = {
    verifyToken(token) {
        return api.post('/auth/jwt/verify', { token })
    },
    async verySecurePath() {
        try {
             this.verifyToken()
             // какой то код
        } catch (error) { // какие то обработки }
        return api.get('/v1/very/secure/')
    },
}

То же самое, если вызывать эту проверку внутри компонентов. Будет мешанина.

Видел, что можно сделать проверку с помощью интерцепторов в axios, но пока не прикинул как.

Буду признателен за любую помощь в вопросе.

Answer 1

[Антон]

А зачем проверять токен? При logout он должен удаляться из localStorage. Если он просрочен, то можно в токене expire проверить... А так функцию написать, получающую токен. В зависимости от состояния токена или из localStorage, или refresh, или create.

Answer 2

[epoxxid]

На мой взгляд, отдельный API метод `verifyToken` - это перебор. С ним теряется вся суть JWT.
Идея JWT-авторизации в том, что клиент может сам проверить подлинность токена, проверив его подпись. И если он подлинный, доверять его содержимому без дополнительных запросов на бэкенд.