React Native异步Token管理与API授权调用教程

import AsyncStorage from '@react-native-async-storage/async-storage';

/**
 * 处理用户登录请求，并存储认证Token。
 * @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: email,
                password: password,
            }),
        });

        const data = await response.json();

        if (response.ok) {
            // 成功登录后，将Token存储到AsyncStorage
            await AsyncStorage.setItem("token", data.token);
            return true;
        } else {
            // 登录失败，抛出后端返回的错误信息
            throw new Error(data.token || "登录失败");
        }
    } catch (error) {
        console.error("登录请求发生错误:", error);
        throw new Error("登录失败，请检查网络或凭据。");
    }
};

import AsyncStorage from '@react-native-async-storage/async-storage';

/**
 * 从AsyncStorage中异步检索认证Token。
 * @returns {Promise<string|null>} - 返回存储的Token字符串，如果不存在或发生错误则返回 null。
 */
export const retrieveToken = async () => {
    try {
        const token = await AsyncStorage.getItem("token");
        return token;
    } catch (error) {
        console.error("检索Token发生错误:", error);
        return null;
    }
};

// 存在问题的代码示例
export const fetchCategoryData = async () => {
    try {
        // 问题所在：retrieveToken() 返回的是一个 Promise，而不是实际的 token 字符串
        const token = retrieveToken(); // 此时 token 变量是一个 Promise 对象
        if (token) { // 这个判断永远为真，因为 token 是一个 Promise 对象，不是 null 或 undefined
            console.log("尝试使用 Promise 对象作为 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}`, // 这里尝试将 Promise 对象转换为字符串
                },
            });
            return await response.json();
        } else {
            throw new Error("未找到认证Token");
        }
    } catch (error) {
        console.error("获取分类数据API调用失败:", error);
        // 处理 API 错误
    }
};

import AsyncStorage from '@react-native-async-storage/async-storage';
// 假设 retrieveToken 已经定义如上

/**
 * 获取分类数据，正确处理Token的异步检索。
 * @returns {Promise<object>} - 返回分类数据。
 */
export const fetchCategoryData = async () => {
    try {
        // 关键修正：使用 await 等待 retrieveToken() 返回实际的 token 字符串
        const token = await retrieveToken(); 

        if (token) {
            console.log("成功获取到Token:", token);
            const response = await fetch("http://192.168.1.65:8000/api/categories/main_groups/", {
                method: "GET",
                headers: {
                    "Content-Type": "application/json",
                    // 正确地将 Token 字符串注入到 Authorization 头部
                    Authorization: `Token ${token}`, 
                },
            });

            if (!response.ok) {
                // 如果响应状态码不是 2xx，则抛出错误
                const errorData = await response.json();
                throw new Error(errorData.detail || `API请求失败，状态码: ${response.status}`);
            }

            return await response.json();
        } else {
            // 如果未获取到 Token，则抛出错误
            throw new Error("未找到认证Token，请先登录。");
        }
    } catch (error) {
        console.error("获取分类数据失败:", error);
        throw error; // 重新抛出错误以便上层组件处理
    }
};