Question

所以我使用React和React-Router。

我有一个onEnter挂钩，用于检查用户是否验证是/否，并执行所需的操作。

export function requireAuth(nextState, replaceState) {
  if (!isAuthenticated()) {
    if (!Storage.get('token')) replaceState(null, '/login');

    return delegate().then(() => replaceState(null, nextState.location.pathname));
  }

  if (nextState.location.pathname !== nextState.location.pathname) {
    return replaceState(null, nextState.location.pathname);
  }
}

当令牌过期时，我调用delegate函数，如下所示：

export function delegate() {
  const refreshToken = Storage.getJSON('token', 'refresh_token');

  return getData(endpoint)
      .then(res => {
        Storage.set('token', JSON.stringify({
          access_token: res.data.access_token,
          refresh_token: refreshToken,
        }));
      });
}

委托函数确实刷新了localStorage中的标记。但是，replaceState之后的请求不使用更新的令牌，而是使用前一个令牌。我认为这是一个异步问题，有人对此有更多了解吗？

编辑：我使用令牌的功能：

function callApi(method, endpoint, data) {
  return new Promise((resolve, reject) => {
    let headers = {
      'Accept': 'application/json',
      'X-API-Token': Storage.getJSON('token', 'access_token'),
    };

    const body = stringifyIfNeeded(data);
    const options = { method, headers, body };

    return fetch(endpoint, options)
      .then(response =>
        response.json().then(json => ({ json, response }))
      ).then(({ json, response }) => {
        if (!response.ok) {
          reject({ json, response });
        }

        resolve(json);
      }).catch((error, response) => {
        reject({ error, response });
      });
  });
}

Async和localStorage无法正常工作

0 个答案: