Реактивная выборка с заголовком авторизации когда-нибудь вернет 401

Question

У меня возникла проблема, из-за которой я когда-нибудь получу код состояния 401 (Не авторизован) с моего телефона. Я пытаюсь получить доступ к API с моего локального компьютера (192.168.0.7).

У меня есть экран, когда я нажимаю на кнопку, он переходит на страницу и запрашивает данные через API. И когда я вернусь и снова зайду на ту же страницу, он когда-нибудь вернет мне код 401.

Итак, если я повторю один и тот же шаг (перейдите и вернитесь), скажем, 10 раз. Я получаю Несанкционированный как 5-7 раз.

Ниже мой код

export function getMyCarpool(param,token) {
    return dispatch => {   
        var requestUrl = _api + 'GetMyProduct?' + param;
        fetch(requestUrl, {
            method: "get",
            headers: new Headers({
                'Accept': 'application/json',
                'Content-Type': 'application/x-www-form-urlencoded',
                'Authorization': 'Bearer ' + token
            })
        })
        .then((request) => {
            console.log(request);
            if(request.status == 200)
                return request.json();
            else if(request.status == 401) {
                //dispatch(logout());    
                throw new Error('Unauthorized access.');
            }
            else 
                throw new Error('Failed to request, please try again.');
        })
        .then((response) => {
            var message = response.message;
            if(response.success == 'true') 
                dispatch({ message, type: GET_MY_PRODUCT_SUCCESS });
            else
                dispatch({ message, type: GET_MY_PRODUCT_FAILED });
        })
        .catch(error => { 
            var message = error.message;
            dispatch({ message, type: GET_MY_PRODUCT_FAILED }); 
        });
    }

Я проверил токен в своем телефоне, а также пытаюсь сделать много запросов с помощью почтальона. Так что я не думаю, что это проблема на стороне сервера.

Я использую Laravel и использую паспорт laravel для аутентификации API. Я не уверен, почему это происходит, если я продолжаю получать доступ много раз, любая помощь очень ценится.

ОБНОВЛЕНИЕ :: Я пытаюсь определить, есть ли у http-запроса токен из этой ссылки , и проблема больше не возникает.

Answer 1

Это здоровый механизм истечения токена.Возможно, у вас есть токен (access_token) на 5 минут, затем срок действия токена истек, вы должны использовать refresh_token для восстановления другого нового токена (access_token).

Для объяснения кода:

async function fetchService(url) {
  const reqSetting = {
    headers: {
      Accept: 'application/json',
      Authorization: `Bearer ${Auth.access_token}`,
    },
  };
  const prevRequest = { url, reqSetting };
  const resp = await fetch(url, reqSetting);
  if (!resp.ok) {
    const error = new Error(resp.statusText || 'Request Failed!');
    if (resp.status === 401 || resp.status === 400) {
      const responseClone = resp.clone();
      const errorInfo = await resp.json();
      if (errorInfo.error == 'invalid_token') {
        // console.log('Token Expired', errorInfo);
        try {
          await refreshToken();
          const response = await fetchService(prevRequest.url);
          return response;
        } catch (err) {
          // handle why not refresh a new token
        }
      }
      return responseClone;
    }
    error.errorUrl = url;
    error.code = resp.status;
    throw error;
  }
  return resp;
}

Где функция обновления токена:

async function refreshToken() {
  const url = 'https://example.com/oauth/token';
  const data = {
    grant_type: 'refresh_token',
    refresh_token: Auth.refresh_token,
  };
  try {
    const res = await fetch(url, data);
    const data = res.json();
    Auth.access_token = data.access_token;
    Auth.refresh_token = data.refresh_token;
    return true;
  } catch (error) {
    throw error;
  }
}

Этот fetchService автоматически восстановит новый токен, если срок действия старого истек, а затем обработает старый запрос.

PS.Если у вас есть несколько запросов одновременно, fetchService потребуется небольшая оптимизация.Вам лучше выбрать другую стратегию восстановления токенов, такую ​​как saga .