使用 Redux-Saga 如何保存我的身份验证令牌？

Question

我在 React Native 应用程序中使用 Redux-Saga。当我从服务器取回身份验证令牌时，如何将其保存到本地存储？

我尝试使用

await AsyncStorage.setItem("token", token);

但是 React Native 抱怨说await是保留字。

我误解了什么吗？传奇代码不是我应该做的地方吗？

这是我的代码

function* loginFlow(action) {
  try {
    let username = action.username;
    let password = action.password;

    const response = yield call(getUser, username, password);
    let token = response.headers.get("access-token");

    const result = yield response.json();

    if (token) {
      console.log("success: ", token);

      yield put({ type: LOGIN_SUCCESS, result });
    } else {
      if (result.error) {
        yield put({ type: LOGIN_FAILURE, error: result.error });
      }
    }
  } catch (e) {
    yield put({ type: LOGIN_FAILURE, error: e.message });
    console.log("error", e);
  }
}

编辑： 这是 getUser 函数：

const getUser = (username, password) => {
  return fetch(`${apiURL}/${apiVersion}/${apiType}/${apiEndpoint_auth}`, {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      email: username,
      password: password
    })
  });
};

Answer 1

这就是我设法在 redux-saga 生成器中存储令牌的方式。

function* loginFlow(email, password) {
  try {
    // get your token
    const token = yield call(loginApi, email, password);

    // store token to local storage
    yield call(storeToken, token);

    yield put({ type: LOGIN_SUCCESS });

  } catch (error) {
    yield put({ type: LOGIN_ERROR, error });
  }
}

function loginApi(email, password) {
  return fetch('https://yourApiUrl', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ email, password }),
  })
    .then(response => response.json())
    .then(json => json)
    .catch((error) => {
      throw error;
    });
}

async function storeToken(token) {
      try {
        await AsyncStorage.setItem('token', token);
      } catch (error) {
        console.log('AsyncStorage error during token store:', error);
      }
    }

注意： 在发送 LOGIN_SUCCESS 操作之前存储您的令牌。这样您就可以通过 LOGIC_SUCCESS 操作进行重新渲染，从而在 React 组件中获取您的令牌。

Answer 2

请记住，await 关键字仅在异步函数内有效。如果您在异步函数体之外使用它，您将收到语法错误。

参考：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

函数生成器需要在function之前有async。