React Native登出时如何删除Django REST Framework认证Token？

问题分析 #

从后端日志的401 Unauthorized可以明确：React Native发起的登出请求未携带认证Token，导致后端接口拒绝执行Token删除操作。而Swagger调用正常是因为它自动带上了已认证的Token；另外你当前代码先调用登出接口再删除本地Token，若接口请求失败，本地Token仍会被删除，逻辑顺序存在问题。

修复步骤 #

1. 给登出请求添加认证Token #

Django REST Framework的Token认证要求在请求头中携带Authorization: Token <Token值>。修改logoutRequest函数，先获取本地Token再发起请求：

export const logoutRequest = async () => {
    try {
        // 先读取本地存储的Token
        const token = await AsyncStorage.getItem("Token");
        if (!token) {
            throw new Error("未找到认证Token");
        }
        // 发起请求时携带认证头，同时使用POST方法（DRF默认登出视图要求POST）
        const response = await fetch("http://192.168.1.65:8000/api/user/logout/", {
            method: "POST",
            headers: {
                "Authorization": `Token ${token}`,
                "Content-Type": "application/json"
            }
        });
        // 确认接口请求成功后，再删除本地Token
        if (response.ok) {
            await removeToken();
            return await response.json();
        } else {
            const errorData = await response.json();
            throw new Error(errorData.detail || "登出失败");
        }
    } catch (error) {
        console.log(error);
        throw error;
    }
};

2. 确认后端登出接口的请求方法 #

如果你的Django后端使用DRF自带的TokenLogoutView，它默认只接受POST请求，这也是之前GET请求返回401的原因之一。确保后端路由配置正确：

# urls.py
from rest_framework.authtoken.views import TokenLogoutView

urlpatterns = [
    # ...其他路由
    path('api/user/logout/', TokenLogoutView.as_view(), name='logout'),
]

3. 调整本地Token删除的逻辑顺序 #

将删除本地Token的操作放在接口请求成功之后，避免出现“接口登出失败但本地Token已被清空”的不一致情况。

验证标准 #

修改后重新测试：

• 后端日志不再出现401 Unauthorized
• Django管理面板中对应用户的Token被成功删除
• React Native本地AsyncStorage中的Token已被移除

内容的提问来源于stack exchange，提问作者mightycode Newton