在现代移动应用开发中，用户认证和授权是不可或缺的环节。认证令牌（如 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 调用能够正常工作，这进一步证实了问题出在令牌的异步获取和使用上。
解决这个问题的关键在于正确地等待异步操作完成。在调用任何返回 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 调用的代码，并加入一些最佳实践。
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.");
}
};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;
}
};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; // 重新抛出错误，让调用者处理
}
};在 React Native 应用中处理认证令牌是日常开发任务，但异步操作的特性要求我们必须精确地管理 Promise。通过理解 async/await 的工作原理，并确保在获取异步存储中的令牌时使用 await 关键字，我们可以有效地避免常见的 Invariant Violation 错误，构建出稳定、可靠且安全的移动应用程序。遵循本文介绍的最佳实践，将有助于提升代码质量和用户体验。
以上就是在 React Native 中正确异步获取与使用认证令牌的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
316
收藏
