Django 與 React 和 JWT 身份驗證錯誤

Question

I'm using django simple jwt with react redux in frontend A user registered from django admin panel can login but a user registered from the frontend can't login, it through a 401 bad request unauthorized user error(pin):"Request failed with狀態碼 400" 錯誤請求：/api/users/login/ "POST /api/users/login/ HTTP/1.1" 400

序列化程序.py

  class UserSerializer(serializers.ModelSerializer):
    name = serializers.SerializerMethodField(read_only=True)
    _id = serializers.SerializerMethodField(read_only=True)
    isAdmin = serializers.SerializerMethodField(read_only=True)

    class Meta:
        model = User
        fields = ['id', '_id', 'username', 'email', 'name', 'isAdmin']
    def get__id(self, obj):
        return obj.id

    def get_isAdmin(self, obj):
        return obj.is_staff

    def get_name(self, obj):
        name = obj.first_name
        if name == '':
            name = obj.email

        return name

class UserSerializerWithToken(UserSerializer):
    token = serializers.SerializerMethodField(read_only=True)
    class Meta:
        model = User
        fields = ['id', '_id', 'username', 'email', 'name', 'isAdmin', 'token']

    def get_token(self, obj):
        token = RefreshToken.for_user(obj)
        return str(token.access_token)  

用戶視圖.py

class MyTokenObtainPairSerializer(TokenObtainPairSerializer):
   
    def validate(self, attrs):
        data = super().validate(attrs)
        serializer = UserSerializerWithToken(self.user).data
        for k, v in serializer.items():
           data[k] = v 
        print("login",data)
        return data


class MyTokenObtainPairView(TokenObtainPairView):
    serializer_class = MyTokenObtainPairSerializer



@api_view(['POST'])
def registerUser(request):
    data = request.data
    print("Data: ",data)
    try:
        user = User.objects.create_user(
            first_name=data['name'],
            username=data['email'],
            email=data['email'],
            password=make_password(data['password'])
        )
        serializer = UserSerializerWithToken(user,many=False)
        return Response(serializer.data)
    except:
        message = {'detail':'User with this email already exists.'}
        return Response(message,status=status.HTTP_400_BAD_REQUEST)

userAction.js

export const login = (email, password) => async (dispatch) => {
    try {

            dispatch({
                    type: USER_LOGIN_REQUEST,
                
                    })
            const config = {
                    headers: {
                        'Content-type': 'application/json'
                    }
            }
            const {data} = await axios.post(
                    '/api/users/login/',
                    {'email': email, 'password': password},
                    config
                )
            dispatch({
                type: USER_LOGIN_SUCCESS,
                payload: data
            })
            
            localStorage.setItem('userInfo', JSON.stringify(data))

            } catch (error) {
                dispatch({
                    type: USER_LOGIN_FAIL,
                    payload: error.response && error.response.data.detail
                        ? error.response.data.detail
                        : error.message
                })
            }
        }

export const logout = () => (dispatch)  => {
    localStorage.removeItem('userInfo')
    dispatch({ type: USER_LOGOUT})
} 

export const register = (name, email, password) => async (dispatch) => {
    try {

            dispatch({
                    type: USER_REGISTER_REQUEST,
                
                    })
            const config = {
                
                    headers: {
                        'Content-type': 'application/json'
                    }
            }
            const {data} = await axios.post(
                    '/api/users/register/',
                    {'name' : name, 'email': email, 'password': password},
                    config
                )
            dispatch({
                type: USER_REGISTER_SUCCESS,
                payload: data
            })

            dispatch({
                type: USER_LOGIN_SUCCESS,
                payload: data
            })
            
            localStorage.setItem('userInfo', JSON.stringify(data))

            } catch (error) {
                dispatch({
                    type: USER_REGISTER_FAIL,
                    payload: error.response && error.response.data.detail
                        ? error.response.data.detail
                        : error.message
                })
            }
        }