引言：认证令牌与异步挑战
在现代移动应用开发中，用户认证和授权是不可或缺的环节。认证令牌（如 jwt 或自定义 token）作为用户身份的凭证，被广泛用于保护后端 api 资源。用户登录成功后，通常会将这些令牌存储在客户端的持久化存储中（如 react native 中的 asyncstorage），以便在后续的 api 请求中携带，证明用户身份。
然而，由于 JavaScript 的异步特性，尤其是在 React Native 环境中，处理这些异步操作时稍有不慎就可能导致问题。AsyncStorage 的存取操作都是异步的，这意味着它们会返回 Promise。如果我们在使用这些 Promise 的结果时没有正确地等待它们完成，就可能导致程序逻辑错误，甚至运行时崩溃。
问题剖析：异步令牌获取的陷阱
假设我们有一个 React Native 应用，用户登录后会获取一个认证令牌并将其存储起来。随后，应用需要调用其他受保护的 API 来获取用户数据。我们可能会遇到以下典型场景：
-
用户登录与令牌存储： 用户通过 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"); } }; -
令牌获取函数： 我们有一个独立的 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; } }; -
受保护 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; // 重新抛出错误，让调用者处理
}
};注意事项
- 键名一致性： 在 AsyncStorage.setItem() 和 AsyncStorage.getItem() 中使用的键名（例如 "token" 或 "Token"）必须完全一致，包括大小写。不一致会导致 getItem 返回 null。在上述示例中，我们统一使用了小写 "token"。
- 错误处理： 异步操作中的 try...catch 块至关重要。它能捕获网络请求失败、JSON 解析错误、以及 AsyncStorage 操作失败等异常，提高应用的健壮性。
- 令牌有效期与刷新： 在实际应用中，认证令牌通常有有效期。当令牌过期时，API 请求会返回认证失败（如 HTTP 401 状态码）。此时，应用需要实现令牌刷新机制（如果后端支持）或提示用户重新登录。
-
安全性：
- 永远不要在生产代码中硬编码敏感信息，如认证令牌。
- 避免在日志中输出完整的认证令牌，以免泄露敏感数据。
- AsyncStorage 并非为存储高度敏感信息而设计，对于极度敏感的数据（如密码），应考虑更安全的存储方案（如 React Native KeyChain）。
- AsyncStorage 导入： 确保你已经从 @react-native-async-storage/async-storage 正确导入了 AsyncStorage。
总结
在 React Native 应用中处理认证令牌是日常开发任务，但异步操作的特性要求我们必须精确地管理 Promise。通过理解 async/await 的工作原理，并确保在获取异步存储中的令牌时使用 await 关键字，我们可以有效地避免常见的 Invariant Violation 错误，构建出稳定、可靠且安全的移动应用程序。遵循本文介绍的最佳实践，将有助于提升代码质量和用户体验。
