Функция Wrap fetch для токена при использовании реаги - PullRequest
Новая
       14

Функция Wrap fetch для токена при использовании реаги

0 голосов
/ 17 февраля 2020

Я использую реактив для хранения доступа и повторных токенов sh от входа в систему. Обычно, чтобы выполнить вызов API, я бы сделал что-то вроде следующего ... 

fetch('/api/options/1/', {
    method: 'PUT',
    credentials: 'same-origin',
    body: JSON.stringify(state),
    headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${auth.access.token}`,
    },
})

Но так как срок действия маркера доступа быстро истекает, это может легко произойти. Я хотел обернуть функцию выборки в функцию, подобную callAPI (url, options), которая будет выполнять следующее:

  1. Проверить, не истек ли токен доступа (переменная global.auth.access.exp). Если срок действия истек, сначала позвоните /api/auth/token/refresh, передав ему токен refre sh, чтобы получить новый токен доступа
  2. Отправить fetch с автоматически добавленным заголовком Authorization
  3. Обещание ответа на ответ

Что было бы лучшим способом go об этом, когда информация об аутентификации хранится в глобальном состоянии reactn, чтобы в любом компоненте я мог просто импортировать функцию callAPI и выполнить Вызов API?

1 Ответ

0 голосов
/ 17 февраля 2020

Учитывая, что вы используете асинхронный / ожидающий синтаксис, вы можете сделать это, используя ниже: 

const fetchWrapper = async (URI, options) => {
    const auth = await fetch('/api/auth/token/refresh');
    const newOptions = {
        ...options,
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${auth.access.token}`,
        },
    }
    const res = await fetch(URI, newOptions);
    return res;
}

если вы не используете асинхронный / ожидающий, вы можете использовать ниже: 

const fetchWrapper = (URI, options) => {
    const promise = new Promise((resolve, reject) => {
        fetch('/api/auth/token/refresh').then((auth) => {
            const newOptions = {
                ...options,
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${auth.access.token}`,
                },
            }
            fetch(URI, newOptions).then(res => {
                resolve(res);
            }).catch((err) => {
                reject(err);
            });
        }).catch((err) => {
            reject(err);
        });
    })

    return promise;
}
...