Внутренняя ошибка 500 и неавторизованная ошибка 401

Я работаю с Django и NextJS, я продолжаю получать 2 ошибки, когда я пытаюсь войти в систему:

1. Из моего файла AuthContext.js "500 (Внутренняя ошибка сервера)"
2. Из моего файла UseApi.js "401 (Unauthorized)" всякий раз, когда я пытаюсь войти в систему, он выбрасывает эти две ошибки я добавил заголовок авторизации, но все равно получаю ту же ошибку

Вот как структурирован каждый файл: AuthContext.js

import { createContext, useState, useEffect } from "react";
import useSWR from "swr";
import { httpWeb } from "../services/http";
import { usePostHog } from "posthog-js/react";


export const AuthContext = createContext();


export default function AuthContextProvider (props) {
    const [token, setToken] = useState(null);
    useEffect(() => {
        // This code runs only on the client side
        const storedToken = localStorage.getItem('token');
        console.log("Token for request:", storedToken);
        setToken(storedToken);
    }, []);

    const posthog = usePostHog()
    const [ isLoading, setLoading ] = useState(true)
    const [ isAuthenticated, setAuthenticated ] = useState(false)
    const [ user, setUser ] = useState(null)

    const { 
        data: user_data, 
        error: user_err,
        mutate: refreshUser
    } = useSWR('/api/auth/user', url => httpWeb.get(url, {
        headers: {
            'Authorization': `Bearer ${token}`
        }
    }).then(res => res.data, {
        errorRetryCount: 0,
        refreshInterval: 0,
        shouldRetryOnError: false
    }))

    const signOut = () => {
        httpWeb.post('/api/auth/logout')
        .then(() => {
            setAuthenticated(false)
            setUser(null)
            setLoading(false)
            posthog.reset()
        })
        .catch(err => {})
    }

    useEffect(() => {
        if (user_data) {
            setUser(user_data.data)
            setAuthenticated(true);
            setLoading(false)
        }
        if (user_err) {
            setAuthenticated(false);
            setUser(null)
            setLoading(false)
        }
    }, [user_data, user_err])

    useEffect(() => {
        if (user) {
            posthog?.identify(
                user?.id,
                { 
                    email: user?.email, 
                    name: user?.full_name,
                    is_staff: user?.is_staff,
                    is_lecturer: user?.is_lecturer,
                    is_student: user?.is_student,
                }
            )
        }
    }, [posthog, user])

    return (
        <AuthContext.Provider value={{ 
                                isAuthenticated, 
                                setAuthenticated,
                                user, 
                                setUser, 
                                isLoading, 
                                setLoading, 
                                signOut,
                                refreshUser
                            }}>
            {props.children}
        </AuthContext.Provider>
    )
}

Вот структура моего файла UseApi.js:

import useSWR from "swr"
import { http } from "./http"


const fetcher = async (url, params={}) => {
    const token = localStorage.getItem('token'); // Retrieve the token from localStorage
    const headers = {
        'Authorization': `Bearer ${token}`, // Set the Authorization header with the token
        ...params.headers // Include any other headers passed in params
    };

    return await http.get(url, { ...params, headers, withCredentials: true }).then(res => res.data.data);
}

const getAPI = url => {
    const { data, error, mutate } = useSWR(url, fetcher)
    
    return {
        data,
        isLoading: !error && !data,
        isError: error,
        mutate
    }
}

export { getAPI }

Мне очень нужна помощь, пожалуйста.

Вернуться на верх