Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.07.2022, 21:42
Интересующийся
Отправить личное сообщение для shurikkan Посмотреть профиль Найти все сообщения от shurikkan
 
Регистрация: 03.05.2014
Сообщений: 21

Vue.js: refresh token без Axios и т.п.
Привет всем.

У меня есть небольшое приложение на Vue.js (2.6).
В приложении можно авторизоваться. Токен (JWT) живёт 1 день.
Недавно решил посмотреть, как работают системы с рефреш токенами (надоело всё время авторизовываться заново). Увы, не смог найти ничего путного, кроме как решения с Axios.

Так встали звёзды, что я не люблю Axios, да и вообще какие-то сторонние библиотеки для запросов. Да и в целом не люблю сторонние пакеты - Vue и так за собой 100500 зависимостей тянет...

Приложения работает на нативном Fetch API.

На сколько я понимаю принцип работы рефреш токена, если в ответ на запрос нам прилетает "токен просрочен", то мы сохраняем параметры последнего запроса и делаем запрос на получение свежего токена. Если приходит новый токен, достаём последний сохранённый запрос и повторяем его с новым токеном.

Вот пример рядового запроса из модуля в сторе:
async readUsers({rootState, state, getters, dispatch}, payload) {

    const token = rootState.token.access

    if(token) {

        state.usersProcess = true

        let params = ''

        if(payload) {

            for( let param in payload) {

                params.length ?
                    params += '&' + param + '=' + payload[param] :
                    params = '?' + param + '=' + payload[param]
            }
        }

        const request = await dispatch('fetchRequest', {
            address: `${rootState.config.httpServer}/users${params}`, 
            method: 'GET', 
            token: true
        })

        if(!request.error) {

            state.users = request
            state.usersMsg = { success: true }

        } else {

            state.usersMsg = { success: false }
            state.usersMsg.text = getters.getTranslate[request.error] || request.error
        }

        state.usersProcess = false

    } else {

        state.usersMsg = { success: false, text: getters.getTranslate.EUnauthRequest }
    }
}


Для запросов написал такой "хелпер":
async fetchRequest({rootState, dispatch}, payload) {

    let parameters = {

        method: payload.method,
        cache: 'no-cache',
        referrerPolicy: 'origin-when-cross-origin',
        headers: new Headers()
    }

    if(payload.token) {

        parameters.headers.append('Authorization', 'Bearer ' + rootState.token.access)
    } 

    if(payload.data) {

        f(payload.type) {

            payload.type == 'json' ?
                parameters.body = JSON.stringify(payload.data) :
                parameters.body = payload.data

        } else {

            parameters.body = JSON.stringify(payload.data)
        }
    }

    try {

        const request = await fetch(payload.address, parameters)

        const response = await request.text()

        const result = JSON.parse( response )

        if(request.ok) {

            return result

        } else if(result.details) {

            if(result.details == 'TokenExpired') {

               dispatch('refreshToken').then(() => {

                    if(rootState.token.access) {

                        return dispatch('fetchRequest', payload)
                    }
                })

            } else if(result.details == 'TokenError') {

                localStorage.clear()
                document.location.reload()
            }

            return { error: result.details }

        } else if(result.message) {

            return { error: result.message }

        } else {

            return { error: 'EUnknown' }
        }

    } catch {

        return { error: 'EConnection' }
    }
}


Экшен для получения свежего токена:
async refreshToken({rootState, state, dispatch}) {

    const request = await dispatch('fetchRequest', {
        address: `${rootState.config.httpServer}/refresh_tokens`, 
        method: 'POST', 
        data: `"${rootState.token.refresh}"`,
        type: 'string'
    })

    if(request.tokens) {

        state.access = request.tokens.access
        state.refresh = request.tokens.refresh

        localStorage.setItem('TOKEN_ACCESS', state.access)
        localStorage.setItem('TOKEN_REFRESH', state.refresh)

    } else {

        state.access = null
        state.refresh = null

        localStorage.clear()
    }
}


И тут я столкнулся с проблемой: каждый компонент с эарана отправляет асинхронные запросы, несколько компонентов могут получить ответ "токен просрочен" практически одновременно. Затем каждый из них отправит запрос на обновление токена, послав параметром старый. Первому компоненту вернётся корректный ответ (новый токен). А вот получив запрос с от остальных компонентов сервер уже вернёт ошибку "неверный токен", т.к. такого у него уже нет (он был заменён другом ранее).

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

Пытался объяснить максимально подробно, надеюсь, что понятно о чём я говорю

Подсобите советом!

Последний раз редактировалось shurikkan, 14.07.2022 в 22:02. Причина: Причесал код в примерах
Ответить с цитированием
  #2 (permalink)  
Старый 15.07.2022, 09:13
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,186

Только как идея (без подробной привязке к Вашему коду)

Допустим есть функция обновления токена
async refreshToken (....) {
// awit Запрос
return token // Она вернет Promise разрешенный с значением токена
}

Когда нам надо обновить токен, делаем

let getToken = refreshToken (....)

getToken - это промис, который разрешается с новым значение токена

Теперь, когда нам нужно как то использовать это значение, мы просто делаем
await getToken
Если промис еще не разрешен, то будет ожидание его разрешения, если функция refreshToken уже завершила получения токена, то сразу получаем это значение.
Так можно было бы написать

parameters.headers.append('Authorization', 'Bearer ' + await getToken)
Ответить с цитированием
  #3 (permalink)  
Старый 15.07.2022, 09:25
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,019

Сообщение от shurikkan
Вероятно, с самого начала ошибка проектирования, но как сделать по другому никак не могу сообразить.
Авторизованные запросы придется делать в цепочку промисов, один за другим.
В противном случае они будут "воровать" токены друг у друга.
Ответить с цитированием
  #4 (permalink)  
Старый 15.07.2022, 09:53
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,019

voraa, у нас не получилось "узнавать" о состоянии токена (обновляется или нет)...

Используем Axios и его интерцепторы. React + MobX... Поскольку там куча всего асинхронного не получилось "точно" узнавать в каком состоянии сейчас находится токены, а помирал наш акцесс через каждые 10мин.

Т.ч. в итоге все авторизованные запросы переделали в цепочки и тем закрыли проблему "воровства" токенов запросами друг у друга.
Ответить с цитированием
  #5 (permalink)  
Старый 15.07.2022, 10:05
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,186

Сообщение от ksa
В противном случае они будут "воровать" токены друг у друга.
Я так понял, что здесь это и надо. Что бы после обновления токена все запросы делались именно с ним. Пока он не помрет. Как помер - обновили и дальше опять все запросы с ним.
Ответить с цитированием
  #6 (permalink)  
Старый 15.07.2022, 10:10
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,186

Сообщение от ksa
у нас не получилось "узнавать" о состоянии токена (обновляется или нет)..
Мы просто не сможем сделать запрос с токеном, когда он обновляется.
Что бы его передать мы должны взять его из промиса. А пока промис на обновления токена не разрешился, мы будем ждать.
Ответить с цитированием
  #7 (permalink)  
Старый 15.07.2022, 10:29
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,019

voraa, я понял твою идею...

Сейчас побеседовал со своими - утверждают что решили и эту проблему. Но немного иначе...
Если попали на неправильный токен, но его кто-то обновляет - просто ждут окончания обновления.

Но твой вариант мне нравится больше.
Ответить с цитированием
  #8 (permalink)  
Старый 15.07.2022, 10:40
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,186

Тут есть одна трабла.
Допустим токен устарел
- Посылаем запрос1
- посылаем запрос2
- Приходит ответ на запрос1, что токен сдох
запускаем обновление
- Приходит ответ на запрос 2, что токен сдох
(и вот тут мы не должны запускать обновление! мы просто должны ждать, пока не придет новый токен) и потом повторять запрос 2 уже с ним)

Т.е в процедуре обновления выставляем флаг inRefresh = true. И снимаем его когда пришел токен.

А когда на запрос получаем ответ, что токен устарел, то проверяем этот флаг. Если установлен, значит его уже обновляют. И мы не запускаем обновление, а просто повторяем запрос - там уже есть ожидание обновления токена.
Ответить с цитированием
  #9 (permalink)  
Старый 15.07.2022, 10:56
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,019

Так и есть.
Ответить с цитированием
  #10 (permalink)  
Старый 15.07.2022, 11:08
Интересующийся
Отправить личное сообщение для shurikkan Посмотреть профиль Найти все сообщения от shurikkan
 
Регистрация: 03.05.2014
Сообщений: 21

Сообщение от voraa Посмотреть сообщение
Тут есть одна трабла.
...
- Посылаем запрос1
- посылаем запрос2
- Приходит ответ на запрос1, что токен сдох
запускаем обновление
- Приходит ответ на запрос 2, что токен сдох
...
Если бы всё было так, то беды с вылетом на экран авторизации не было бы Это уже было бы не так плохо. Просто была бы куча запросов в момент истечения срока жизни токена (от каждого компонента на экране)... Но сколько API я не видел - во всех система немного другая:
- Посылаем запрос1
- посылаем запрос2
- Приходит ответ на запрос1, что токен сдох
запускаем обновление
- Приходит ответ на запрос 2, что токен НЕВАЛИДНЫЙ

После первого запроса старая связка access-refresh уже обновлена. Сервер не хранит старые связки (чтобы не засорять память), поэтому получил весуществующий рефреш-токен в запросе просто вернёт ошибку. Ну и фронт, соответственно, увидев ошибку, а не устарение, выбросит юзера из приложения.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Кнопка refresh не работает в pagingtoolbar без ViewModel Sogl ExtJS 16 13.10.2016 11:28