异步 Redux 操作：将身份验证令牌添加到 fetch() 请求

Question

我目前有一个异步 redux 操作（带中间件），它从我的后端获取数据。我正在添加 Firebase 身份验证，并希望在此请求中包含身份验证令牌。使用下面的函数getAuthToken() 异步获取身份验证令牌。下面的代码不起作用，抱怨

无法读取未定义的属性“解析”

这个简单的任务，将一个异步的输出链接到另一个，但我是 JS 新手。我怎样才能做到这一点？

// I'm sure returning from an async function like this is wrong.
function getAuthToken() {
  firebase
    .auth()
    .currentUser.getIdToken(/* forceRefresh */ true)
    .then(idToken => {
      return idToken;
    });
}

// Async redux action.
export function getData(userId) {
  return dispatch => {
    return fetch(`${BASE_URL}/data/${userId}`, {
      headers: { Authorization: getAuthToken().resolve() } // Can I even resolve like this?
    })
      .then(response => response.json())
      .then(json => dispatch(returnSurveys(json)));
  };
}

Answer 1

短期解决方案：首先等待令牌，然后发送您的请求。

function getAuthToken() {
  return firebase
    .auth()
    .currentUser.getIdToken(/* forceRefresh */ true)
    .then(idToken => {
      return idToken;
    });
}

export function getData(userId) {
  return dispatch => {
    return getAuthToken().then(token => 
      fetch(`${BASE_URL}/data/${userId}`, {
        headers: { Authorization: token } // Can I even resolve like this?
      })
      .then(response => response.json())
      .then(json => dispatch(returnSurveys(json))));
  };
}

缺点：每次您想向后端询问某事时都调用getAuthToken 绝对是不好的做法。

所以你最好把 token 和其他数据一样放入 Redux 中。

然后你可以从外部传递令牌：

export function getData(userId, token) { ....

或者，可能更好的是，在您的 thunk 中请求存储令牌（第二个参数 getState 由 redux-thunk 传递）：

export function getData(userId) {
  return (dispatch, getState) => {
    return fetch(`${BASE_URL}/data/${userId}`, {
      headers: { Authorization: getState().path.to.token.in.your.store } 
    })

在某些时期它被认为是相当糟糕的方法，这就是为什么它没有广为人知的原因。但是有不同的points of view，对我来说你的情况非常适合。