reactjs - 未处理的拒绝（TypeError）：无法读取未定义的属性（读取“访问”）

Question

我正在使用 react 和 redux 来创建简单的用户身份验证。当我单击登录按钮时，用户已通过身份验证，但用户重新发送 null。通过调试，我意识到错误来自 auth 操作。从带有变量名的身份验证操作函数（在下面的代码中找到），load_user我不明白要使用的正确 URL。我知道它应该接受获取请求，但我使用的登录 API 不能接受获取请求。通过使用 GET 请求，我得到了method not allowed. 正是由此获得的数据load_user在负载中分派，用于评估 redux reducer 中的 ACCESS 和 REFRESH 令牌。因为我没有发出正确的 axios 请求，所以反应无法读取返回的访问令牌的属性，因此我'

Auth Action
_____________
import axios from 'axios';
import { LOGIN_SUCCESS, LOGIN_FAIL, USER_LOADED_SUCCESS, USER_LOADED_FAIL,} from './types';


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{
        const res = await axios.get(`${process.env.REACT_APP_API_URL}/account/login`, config)

        dispatch({
            type: USER_LOADED_SUCCESS,
            payload: res.data
        })
        
    }
        catch (err){
            dispatch({
                type: USER_LOADED_FAIL,
            })
        }
    }else {
        dispatch({
            type: USER_LOADED_FAIL,
        })
    }
    
};

export const login = (email, password) => async dispatch => {
    const config = {
        headers: {
            'Content-Type':'application/json'
        }
    };
    //const body = JSON.stringify({email, password});
    const body = {email, password};
    const data = JSON.stringify(body);
    
    try{
        console.log(data)
        const res = await axios.post(`${process.env.REACT_APP_API_URL}/account/login`, data, config)

        dispatch({
            type: LOGIN_SUCCESS,
            payload: res.data
        })
        dispatch(load_user());
    }   catch (err){
        dispatch({
            type: LOGIN_FAIL,
    
        })
    }
    
}

授权减速器

import { LOGIN_SUCCESS, LOGIN_FAIL, USER_LOADED_SUCCESS, USER_LOADED_FAIL,} from '../actions/types'

const initialState = {
    access: localStorage.getItem('access'),
    refresh: localStorage.getItem('refresh'),
    isAuthenticated: null,
    user: null
};

const authReducer = (state = initialState, action) => {
    const { type, payload } = action;
    switch (type) {
        case LOGIN_SUCCESS:
            localStorage.setItem('access', payload.access);
            return{
                ...state,
                isAuthenticated: true,
                access: payload.access,
                refresh: payload.refresh
            }
        case USER_LOADED_SUCCESS:
            localStorage.setItem('access', payload.access);
            return{
                ...state,
                user: payload
          
            }
          case USER_LOADED_FAIL:
            localStorage.setItem('access', payload.access);
            return{
                ...state,
                user: null
          
            }
        case LOGIN_FAIL:
            localStorage.removeItem('access');
            localStorage.removeItem('refresh');
            return {
                ...state,
                isAuthenticated: false,
                access: null,
                refresh: null,
                user: null
            }
        default:
            return state;
    }
}

export default authReducer

当我登录用户时，我会从 django 服务器控制台获得以下输出（注意，在一次登录后控制台上会出现状态 200 和状态 400）

[09/Nov/2021 10:05:28] "POST /account/login HTTP/1.1" 200 506
Bad Request: /user/login
[09/Nov/2021 10:05:28] "POST /account/login HTTP/1.1" 400 76

登录views.py

class LoginAPIView(generics.GenericAPIView):
    serializer_class = LoginSerializer

    def post(self, request):
        serializer = self.serializer_class(data=request.data)
        serializer.is_valid(raise_exception=True)
        return Response(serializer.data, status=status.HTTP_200_OK)

拜托，我的问题是，由于登录 API 不能接受获取请求，我怎么知道发送 axios 请求的近似 url？

标签： reactjsdjangoreduxreact-redux