在 React Native 中正确异步获取与使用认证令牌

本教程详细阐述了在 React Native 应用中，如何正确地从异步存储（如 AsyncStorage）中获取用户登录后生成的认证令牌，并将其应用于后续的受保护 API 请求。核心在于理解异步操作，并使用 await 关键字确保在令牌被使用前已完全检索，从而避免常见的 Invariant Violation 错误，确保应用程序的稳定性和数据安全。

引言：认证令牌与异步挑战

在现代移动应用开发中，用户认证和授权是不可或缺的环节。认证令牌（如 jwt 或自定义 token）作为用户身份的凭证，被广泛用于保护后端 api 资源。用户登录成功后，通常会将这些令牌存储在客户端的持久化存储中（如 react native 中的 asyncstorage），以便在后续的 api 请求中携带，证明用户身份。

然而，由于 JavaScript 的异步特性，尤其是在 React Native 环境中，处理这些异步操作时稍有不慎就可能导致问题。AsyncStorage 的存取操作都是异步的，这意味着它们会返回 Promise。如果我们在使用这些 Promise 的结果时没有正确地等待它们完成，就可能导致程序逻辑错误，甚至运行时崩溃。

问题剖析：异步令牌获取的陷阱

假设我们有一个 React Native 应用，用户登录后会获取一个认证令牌并将其存储起来。随后，应用需要调用其他受保护的 API 来获取用户数据。我们可能会遇到以下典型场景：

1. 用户登录与令牌存储： 用户通过 loginRequest 函数登录，成功后将令牌存储到 AsyncStorage。

   import AsyncStorage from '@react-native-async-storage/async-storage';
   export const loginRequest = async (email, password) => {
   try {
   const response = await fetch("http://192.168.1.65:8000/api/user/token/", {
   method: "POST",
   headers: {
   "Content-Type": "application/json",
   },
   body: JSON.stringify({ email, password }),
   });
   const data = await response.json();
   if (response.ok) {
   await AsyncStorage.setItem("Token", data.token); // 注意键名大小写
   return true;
   } else {
   throw new Error(data.token || "Login failed with unknown error.");
   }
   } catch (error) {
   console.error("Login error:", error);
   throw new Error("Login failed");
   }
   };

2. 令牌获取函数： 我们有一个独立的 retrieveToken 函数用于从 AsyncStorage 中获取令牌。

   import AsyncStorage from '@react-native-async-storage/async-storage';
   export const retrieveToken = async () => {
   try {
   const token = await AsyncStorage.getItem("token"); // 注意键名大小写
   return token;
   } catch (error) {
   console.error("Token retrieval error:", error);
   return null;
   }
   };

3. 受保护 API 调用： 在尝试调用 fetchCategoryData API 时，我们希望先获取令牌并将其放入 Authorization 请求头。

   export const fetchCategoryData = async () => {
   try {
   const token = retrieveToken(); // 问题所在：缺少 'await'
   if (token) {
   console.log(token); // 此时 token 实际上是一个 Promise 对象
   const response = await fetch("http://192.168.1.65:8000/api/categories/main_groups/", {
   method: "GET",
   headers: {
   "Content-Type": "application/json",
   Authorization: `Token ${token}`, // 这里尝试将 Promise 对象转换为字符串
   },
   });
   return await response.json();
   } else {
   throw new Error("Authentication token not found.");
   }
   } catch (error) {
   console.error("Failed to fetch category data:", error);
   throw error;
   }
   };

上述 fetchCategoryData 函数中，const token = retrieveToken(); 这行代码是问题的根源。由于 retrieveToken 是一个 async 函数，它总是返回一个 Promise。如果我们不使用 await 关键字，token 变量接收到的将是这个 Promise 对象本身，而不是 Promise 解析后的实际令牌字符串。当这个 Promise 对象被隐式转换为字符串并用于 Authorization 头时，就会导致类似 Invariant Violation: TaskQueue: Error with task : Tried to get frame for out of range index NaN 的运行时错误，因为 Authorization 头期望的是一个字符串，而不是一个 Promise。

当我们硬编码一个令牌字符串时，API 调用能够正常工作，这进一步证实了问题出在令牌的异步获取和使用上。

解决方案：正确使用 await 关键字

解决这个问题的关键在于正确地等待异步操作完成。在调用任何返回 Promise 的 async 函数时，我们应该使用 await 关键字来暂停当前函数的执行，直到 Promise 解析并返回其结果。

将 fetchCategoryData 函数中的令牌获取行进行修改，添加 await：

export const fetchCategoryData = async () => {
try {
const token = await retrieveToken(); // 关键的修正：添加 'await'
if (token) {
console.log("Retrieved token:", token); // 现在 token 将是实际的令牌字符串
const response = await fetch("http://192.168.1.65:8000/api/categories/main_groups/", {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: `Token ${token}`,
},
});
if (!response.ok) { // 检查HTTP响应状态，处理非2xx响应
const errorData = await response.json();
throw new Error(errorData.detail || `API error: ${response.status}`);
}
return await response.json();
} else {
throw new Error("Authentication token not found.");
}
} catch (error) {
console.error("Failed to fetch category data:", error);
// 根据错误类型，可能需要引导用户重新登录或进行其他错误处理
throw error; // 重新抛出错误以便上层组件处理
}
};

通过添加 await，我们确保 retrieveToken() 返回的 Promise 在 token 变量被赋值之前就已经解析。这样，token 变量将直接包含实际的令牌字符串，而不是一个 Promise 对象，从而解决了 Invariant Violation 错误。

代码示例与最佳实践

为了提供一个完整的、健壮的认证令牌管理示例，我们将结合登录、令牌存储、获取和受保护 API 调用的代码，并加入一些最佳实践。

1. 登录与令牌存储 (loginRequest)

import AsyncStorage from '@react-native-async-storage/async-storage';
/**
* 处理用户登录请求，并在成功后存储认证令牌。
* @param {string} email 用户邮箱。
* @param {string} password 用户密码。
* @returns {Promise<boolean>} 如果登录成功则返回 true，否则抛出错误。
*/
export const loginRequest = async (email, password) => {
try {
const response = await fetch("http://192.168.1.65:8000/api/user/token/", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ email, password }),
});
const data = await response.json();
if (response.ok) {
// 确保键名一致性，这里使用小写 'token'
await AsyncStorage.setItem("token", data.token);
console.log("Login successful, token stored.");
return true;
} else {
// 抛出后端返回的错误信息
throw new Error(data.token || "Login failed with unknown error.");
}
} catch (error) {
console.error("Login request failed:", error);
throw new Error("Login failed. Please check your credentials and try again.");
}
};

2. 令牌获取 (retrieveToken)

import AsyncStorage from '@react-native-async-storage/async-storage';
/**
* 从 AsyncStorage 中异步获取认证令牌。
* @returns {Promise<string | null>} 如果找到令牌则返回令牌字符串，否则返回 null。
*/
export const retrieveToken = async () => {
try {
// 确保键名与存储时一致，这里使用小写 'token'
const token = await AsyncStorage.getItem("token");
return token;
} catch (error) {
console.error("Failed to retrieve token from AsyncStorage:", error);
return null;
}
};

3. 受保护 API 调用 (fetchCategoryData)

import { retrieveToken } from './authService'; // 假设 retrieveToken 位于 authService 文件中
/**
* 调用受认证保护的 API 以获取分类数据。
* @returns {Promise<object>} 返回 API 响应的 JSON 数据。
* @throws {Error} 如果令牌不存在或 API 调用失败。
*/
export const fetchCategoryData = async () => {
try {
const token = await retrieveToken(); // 关键：使用 await 获取实际令牌
if (!token) {
throw new Error("Authentication token not found. Please log in again.");
}
console.log("Using token for API call:", token); // 调试信息
const response = await fetch("http://192.168.1.65:8000/api/categories/main_groups/", {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: `Token ${token}`, // 正确使用令牌字符串
},
});
if (!response.ok) {
// 详细处理非成功响应，例如 401 Unauthorized, 403 Forbidden 等
const errorData = await response.json();
console.error(`API Error ${response.status}:`, errorData);
throw new Error(errorData.detail || `API request failed with status: ${response.status}`);
}
return await response.json();
} catch (error) {
console.error("Error fetching category data:", error);
// 根据错误类型，可能需要清空本地令牌并引导用户重新登录
if (error.message.includes("Authentication token not found") || error.message.includes("401")) {
// 考虑在此处触发登出流程
// await AsyncStorage.removeItem("token");
}
throw error; // 重新抛出错误，让调用者处理
}
};

注意事项

1. 键名一致性： 在 AsyncStorage.setItem() 和 AsyncStorage.getItem() 中使用的键名（例如 “token” 或 “Token”）必须完全一致，包括大小写。不一致会导致 getItem 返回 null。在上述示例中，我们统一使用了小写 “token”。
2. 错误处理： 异步操作中的 try…catch 块至关重要。它能捕获网络请求失败、JSON 解析错误、以及 AsyncStorage 操作失败等异常，提高应用的健壮性。
3. 令牌有效期与刷新： 在实际应用中，认证令牌通常有有效期。当令牌过期时，API 请求会返回认证失败（如 HTTP 401 状态码）。此时，应用需要实现令牌刷新机制（如果后端支持）或提示用户重新登录。
4. 安全性：
   • 永远不要在生产代码中硬编码敏感信息，如认证令牌。
   • 避免在日志中输出完整的认证令牌，以免泄露敏感数据。
   • AsyncStorage 并非为存储高度敏感信息而设计，对于极度敏感的数据（如密码），应考虑更安全的存储方案（如 React Native KeyChain）。
5. AsyncStorage 导入： 确保你已经从 @react-native-async-storage/async-storage 正确导入了 AsyncStorage。

总结

在 React Native 应用中处理认证令牌是日常开发任务，但异步操作的特性要求我们必须精确地管理 Promise。通过理解 async/await 的工作原理，并确保在获取异步存储中的令牌时使用 await 关键字，我们可以有效地避免常见的 Invariant Violation 错误，构建出稳定、可靠且安全的移动应用程序。遵循本文介绍的最佳实践，将有助于提升代码质量和用户体验。