在 React Native 中安全地获取并使用认证 Token

认证流程概述与常见问题

在许多 React Native 应用中，用户登录后会从后端 API 获取一个认证 Token。这个 Token 通常需要存储在客户端（例如使用 AsyncStorage）以便后续的 API 请求能够进行身份验证。一个典型的认证流程包括：

1. 用户登录： 用户提交凭据（邮箱、密码）。
2. 获取 Token： 应用向认证 API 发送请求，成功后获取 Token。
3. 存储 Token： 将获取到的 Token 存储在 AsyncStorage 中。
4. 后续 API 调用： 在需要认证的 API 请求中，从 AsyncStorage 中检索 Token，并将其作为 Authorization 头发送。

然而，在实现第四步时，开发者经常会遇到一个常见问题：尽管 Token 已成功存储，但后续的 API 调用却因为无法获取到有效的 Token 而失败，有时甚至会抛出 Invariant Violation 错误，提示尝试获取超出范围的索引。这通常是因为对 JavaScript 的异步操作理解不足，特别是当涉及到 AsyncStorage 这类异步存储机制时。

问题的核心在于 AsyncStorage.getItem() 是一个异步操作，它返回一个 Promise。如果不对这个 Promise 进行 await，那么变量将不会立即持有 Token 字符串，而是一个 Promise 对象。当这个 Promise 对象被用于字符串拼接（例如在 Authorization: \Token ${token}`` 中），JavaScript 会尝试将 Promise 对象转换为字符串，这通常会导致非预期的行为或错误。

解决方案：正确使用 async/await

解决上述问题的关键在于确保在需要使用 Token 的地方，正确地 await 异步 Token 检索函数。这意味着 retrieveToken() 函数的返回值必须在被使用前得到解析。

百度文心百中

百度大模型语义搜索体验中心

22

查看详情

以下是修正后的 fetchCategoryData 函数示例：

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: email,
                password: password,
            }),
        });

        const data = await response.json();

        if (response.ok) {
            // 注意：存储时键名应与检索时一致，这里统一为 "token"
            await AsyncStorage.setItem("token", data.token);
            return true;
        } else {
            // 根据实际API错误响应调整错误处理
            throw new Error(data.detail || "Login failed");
        }
    } catch (error) {
        console.error("Login error:", error);
        throw new Error("Login failed");
    }
};

// 检索 Token 函数
export const retrieveToken = async () => {
    try {
        // 从 AsyncStorage 中获取 Token
        const token = await AsyncStorage.getItem("token");
        return token;
    } catch (error) {
        console.error("Token retrieval error:", error);
        return null;
    }
};

// 获取分类数据的 API 调用函数
export const fetchCategoryData = async () => {
    try {
        // 关键修正：确保 await retrieveToken()，获取到实际的 Token 字符串
        const token = await retrieveToken();

        if (token) {
            console.log("Retrieved 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}`, // 使用获取到的 Token
                },
            });

            if (!response.ok) {
                // 处理非成功响应，例如 401 Unauthorized
                const errorData = await response.json();
                throw new Error(errorData.detail || `API request failed with status ${response.status}`);
            }

            return await response.json();
        } else {
            // 如果 Token 不存在，抛出错误或重定向到登录页
            throw new Error("Authentication token not found.");
        }
    } catch (error) {
        console.error("API call error:", error);
        // 根据错误类型进行适当处理，例如：如果 Token 无效，可以尝试刷新或要求用户重新登录
        throw error; // 重新抛出错误以便上层调用者处理
    }
};

代码解析与注意事项：

1. await retrieveToken() 的重要性： 在 fetchCategoryData 函数中，const token = await retrieveToken(); 这一行是解决问题的核心。它确保了 retrieveToken() 函数执行完毕，并且 Promise 被解析，将实际的 Token 字符串赋值给 token 变量，而不是一个待定的 Promise 对象。
2. 错误处理：
   • 在 loginRequest、retrieveToken 和 fetchCategoryData 中都包含了 try...catch 块，这是处理异步操作中可能出现的错误的关键。
   • 对于 API 响应，不仅要检查 response.ok，还应该解析错误信息（如果 response.ok 为 false），以便提供更具体的错误反馈。
   • 如果 retrieveToken() 返回 null (即没有找到 Token)，fetchCategoryData 应该明确地处理这种情况，例如抛出错误，或者引导用户重新登录。
3. 键名一致性： 确保 AsyncStorage.setItem("token", data.token) 和 AsyncStorage.getItem("token") 使用完全相同的键名（例如，都使用 "token" 或 "Token"）。大小写不一致是常见的错误源。
4. Token 格式： 后端通常要求 Authorization 头采用特定格式，例如 Token <your_token_string> 或 Bearer <your_token_string>。请根据您的后端 API 文档来确定正确的格式。
5. 异步操作的链式调用： 理解 async/await 是对 Promise 链式调用的语法糖。任何返回 Promise 的函数（例如 fetch、AsyncStorage.getItem）在需要其结果时都应使用 await。
6. Invariant Violation 错误： 当 token 变量实际上是一个 Promise 对象时，将其用于字符串拼接会导致 React Native 内部的某些组件或任务队列处理出错，从而引发 Invariant Violation 错误。通过正确 await，可以避免这种类型错误。

最佳实践与进阶考虑

• 集中管理 API 请求： 考虑创建一个专门的 API 服务层，封装所有 API 请求逻辑，包括 Token 的获取和设置，使得代码更具可维护性。
• 全局状态管理： 对于大型应用，可以将 Token 存储在全局状态管理库（如 Redux、Zustand 或 React Context API）中。登录成功后，不仅存储到 AsyncStorage，也更新全局状态。这样，在组件中可以直接从全局状态获取 Token，而无需每次都访问 AsyncStorage，从而提高性能和响应速度。
• Token 刷新机制： 认证 Token 通常有有效期。一旦 Token 过期，API 请求会返回 401 Unauthorized。一个健壮的应用应该实现 Token 刷新机制，使用 Refresh Token 在后台静默地获取新的 Access Token。
• 安全性： AsyncStorage 提供了基本的安全存储，但对于极度敏感的信息，可能需要考虑更高级别的加密存储方案。

通过遵循这些指导原则和代码示例，您可以确保在 React Native 应用中，认证 Token 的获取和使用是可靠且安全的，从而为用户提供流畅的体验。

以上就是在 React Native 中安全地获取并使用认证 Token的详细内容，更多请关注php中文网其它相关文章！