Django+React使用useContext与Axios实现JWT认证报错求助

1. 类型错误：Cannot read properties of undefined (reading 'value') #

原因 #

• Login组件中，按钮同时绑定了onClick={loginUser}，表单又绑定了onSubmit={loginUser}。点击按钮时会触发两次loginUser：一次是按钮的点击事件（此时e.target是按钮元素，没有name属性），另一次是表单的提交事件。按钮的点击事件触发时，e.target.name为undefined，导致读取.value时报错。
• AuthContext中获取表单值的方式错误：e.target.name.value写法逻辑错误，应该通过表单的elements集合获取对应name的输入框值。

解决方法 #

• 移除按钮上的onClick={loginUser}，仅保留表单的onSubmit绑定。
• 修改AuthContext中loginUser函数里获取输入值的方式：

  username: e.target.elements.username.value,
  password: e.target.elements.password.value
  

2. Axios 401 Unauthorized错误 #

原因 #

Axios的post方法参数顺序错误：第二个参数是请求体数据，第三个参数才是请求配置（包含headers）。当前代码把headers放在了请求体里，导致后端无法正确解析username和password，同时请求格式不符合要求，返回401。

解决方法 #

调整Axios请求的参数结构，将headers放在第三个参数的配置对象中：

axios.post('http://127.0.0.1:8000/api/token/', 
  {
    username: e.target.elements.username.value,
    password: e.target.elements.password.value
  },
  {
    headers: {
      'Content-type': 'application/json'
    }
  }
)

完整修正代码 #

AuthContext.js #

export const AuthProvide = ({children}) => {
    const [authToken, setAuthToken] = useState(null)
    const [user, setUser] = useState(null)

    function loginUser(e) {
        e.preventDefault()
        axios.post('http://127.0.0.1:8000/api/token/', 
            {
                username: e.target.elements.username.value,
                password: e.target.elements.password.value
            },
            {
                headers: {
                    'Content-type': 'application/json'
                }
            }
        )
        .then(response => {
            // 处理登录成功逻辑，比如保存token和用户信息
            setAuthToken(response.data.access)
            // 可根据需求调用用户信息接口，更新user状态
        })
        .catch(error => {
            // 处理登录失败逻辑
            console.error(error)
        })
    }

    let contextData = {
        user: user,
        token: authToken,
        loginUser: loginUser,
    }

    return (
        <AuthContext.Provider value={contextData}>
            {children}
        </AuthContext.Provider>
    )
}

Login.js #

import AuthContext from "../context/AuthContext";

const Login = () => {
    const {loginUser} = useContext(AuthContext)

    return (
        <>
            <Header />
            <form onSubmit={loginUser}>
                <input type='text' name='username' placeholder="用户名" />
                <input type='password' name='password' placeholder="密码" />
                <button type="submit">Submit</button>
            </form>
        </>
    )
}

额外建议：给按钮加上type="submit"属性，明确其表单提交按钮的角色，避免浏览器默认行为异常。

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