React+Redux用户认证报错：Cannot read properties of undefined (reading 'access')及load_user请求URL适配问题

看起来你踩了一个常见的误区：登录接口（POST /account/login）是用来获取JWT令牌的，而不是用来获取用户详情的。你现在用load_user去GET登录接口，自然会收到method not allowed错误，因为这个接口只支持POST请求。下面一步步帮你解决：

第一步：明确两个接口的核心职责 #

• 登录接口：接收邮箱/密码参数，返回ACCESS/REFRESH令牌（你当前的POST请求逻辑是正确的）。
• 用户详情接口：需要单独的GET接口，接收携带JWT令牌的请求，返回当前登录用户的信息——这才是load_user应该请求的目标。

第二步：在Django后端新增用户详情API #

首先需要在Django中添加一个专门用于返回用户信息的接口：

1. 新增用户序列化器（例如在serializers.py中） #

from rest_framework import serializers
from django.contrib.auth import get_user_model

User = get_user_model()

class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ('id', 'email', 'username')  # 按需添加你需要展示的用户字段

2. 新增用户详情视图（在views.py中） #

from rest_framework import permissions, status
from rest_framework.views import APIView
from rest_framework.response import Response
from .serializers import UserSerializer

class UserDetailAPIView(APIView):
    # 仅允许已认证用户访问该接口
    permission_classes = [permissions.IsAuthenticated]

    def get(self, request):
        # JWT认证会自动将当前用户挂载到request.user上
        serializer = UserSerializer(request.user)
        return Response(serializer.data, status=status.HTTP_200_OK)

3. 添加对应路由（在urls.py中） #

from django.urls import path
from .views import LoginAPIView, UserDetailAPIView  # 导入新增的视图

urlpatterns = [
    path('account/login/', LoginAPIView.as_view(), name='login'),
    path('account/user/', UserDetailAPIView.as_view(), name='user-detail'),  # 新增用户详情路由
]

第三步：修正React的load_user函数 #

把load_user中的请求URL替换为刚才新增的用户详情接口：

export const load_user = () => async dispatch =>{
 if(localStorage.getItem('access')){
 const config = {
 headers: {
 'Content-Type':'application/json',
 'Authorization': `JWT ${localStorage.getItem('access')}`,
 'Accept': 'application/json'
 }
 };
 try{
 // 替换为用户详情接口的URL
 const res = await axios.get(`${process.env.REACT_APP_API_URL}/account/user/`, config)
 dispatch({
 type: USER_LOADED_SUCCESS,
 payload: res.data
 })
 } catch (err){
 dispatch({
 type: USER_LOADED_FAIL,
 })
 }
 }else {
 dispatch({
 type: USER_LOADED_FAIL,
 })
 }
 };

第四步：修复Auth Reducer中的bug #

你的USER_LOADED_FAIL分支有个明显错误——失败场景下payload是不存在的，却尝试读取payload.access，这会引发额外的类型错误，需要删掉这行代码：

case USER_LOADED_FAIL:
 // 删除这行：localStorage.setItem('access', payload.access);
 return{
 ...state,
 user: null
 }

最后验证流程 #

1. 用户登录（POST /account/login）成功，获取ACCESS令牌并存入localStorage。
2. 调用load_user，向GET /account/user/发起请求并携带JWT令牌。
3. Django后端验证令牌有效，返回当前用户信息。
4. Redux触发USER_LOADED_SUCCESS，将用户信息存入user状态，完成认证流程。

这样就能解决你遇到的Cannot read properties of undefined (reading 'access')和method not allowed错误了。

内容的提问来源于stack exchange，提问作者C-Bizz