React中从Django后端获取Token时解构赋值变量为undefined问题

问题场景 #

在React中构建AuthContext对接Django后端做登录验证，后端返回200状态码及预期Token，但解构response.data后responseToken始终为undefined，已排除变量名冲突问题。相关代码如下：

import React, { createContext, useState, useEffect} from 'react';
import axios from 'axios';

export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [token, setToken] = useState(null);

  const login = async (username, password) => {
    try {
      const response = await axios.post('http://127.0.0.1:8000/token/', {
        username,
        password
      });
      console.log('Response data:', response.data);
      const { token: responseToken } = response.data;
      setToken(responseToken);
  
      console.log('Token loaded:', responseToken);
    } catch (error) {
      console.error('Error en el inicio de sesión:', error);
    }
  };    

  useEffect(() => {
    console.log('Token actual value:', token); 
  }, [token]);

  return (
    <AuthContext.Provider value={{ token, login }}>
      {children}
    </AuthContext.Provider>
  );
};

解决方案 #

1. 核对后端返回的字段名 #

如果使用Django REST Framework的默认TokenObtainPairView（JWT认证），后端返回的字段是access和refresh，而非token，这是最常见的错误原因。

查看控制台输出的Response data，确认实际的字段键名，比如是否是access、refresh或自定义的其他名称。

2. 修改解构代码 #

根据后端实际返回的字段调整解构逻辑：

• 若后端返回access字段：

const { access: responseToken } = response.data;

• 若后端自定义返回token字段，需确认键名大小写完全匹配（比如是否是Token或TOKEN），修正解构语句：

// 假设后端返回的键是"Token"
const { Token: responseToken } = response.data;

3. 验证修改后的代码 #

调整后的登录函数示例（以JWT的access字段为例）：

const login = async (username, password) => {
  try {
    const response = await axios.post('http://127.0.0.1:8000/token/', {
      username,
      password
    });
    console.log('Response data:', response.data);
    // 解构access字段并重命名为responseToken
    const { access: responseToken } = response.data;
    setToken(responseToken);

    console.log('Token loaded:', responseToken);
  } catch (error) {
    console.error('Error en el inicio de sesión:', error);
  }
};

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