Административные полномочия не могли быть переданы, я не знаю, почему я попробовал так много способов, которыми значения ⇐ Javascript

[Anonymous]

Как мы видим здесь, AuthContext вызывается в администраторе, но он не получает никаких значений, и он не работает. В моем приложении React с использованием AuthContext. Аутентификация, кажется, работает, но внутри маршрутов /* admin /* useauth () не получает никаких значений. В результате аутентификация не работает правильно на маршрутах администратора. . < /p>
проверил, что LocalStorage правильно хранит пользователя и роль. Используется console.log внутри Useauth () в компонентах администратора, и она регистрирует неопределенную.import { useNavigate } from 'react-router-dom';
import axios from 'axios';

interface AuthContextType {
user: any | null;
isAdmin: boolean;
signIn: (email: string, password: string) => Promise;
signUp: (email: string, password: string) => Promise;
signOut: () => Promise;
resetPassword: (email: string) => Promise;
updatePassword: (password: string) => Promise;
}

const AuthContext = createContext(undefined);

export const AuthProvider: React.FC = ({ children }) => {
const [user, setUser] = useState(null);
const [isAdmin, setIsAdmin] = useState(false);
const [isInitialized, setIsInitialized] = useState(false);
const navigate = useNavigate();

useEffect(() => {
const storedUser = localStorage.getItem('user');
const storedRole = localStorage.getItem('role');

if (storedUser && storedRole) {
try {
const parsedUser = JSON.parse(storedUser);
setUser(parsedUser);
setIsAdmin(storedRole === 'admin');
} catch (error) {
console.error('Error parsing stored user:', error);
}
} else {
setUser(null);
setIsAdmin(false);
}

setIsInitialized(true);
}, []);

const signIn = async (email: string, password: string) => {
try {
const response = await axios.post('http://localhost:4500/api/auth/login', { email, password });
const { accessToken, role } = response.data;

localStorage.setItem('accessToken', accessToken);
localStorage.setItem('role', role);
localStorage.setItem('user', JSON.stringify({ email, role }));

setUser({ email, role });
setIsAdmin(role === 'admin'); // Update state properly

if (role === 'admin') {
navigate('/admin/dashboard');
} else {
navigate('/');
}
} catch (error) {
console.error('Error signing in:', error);
throw new Error('Invalid credentials');
}
};

const signUp = async (email: string, password: string) => {
try {
const response = await axios.post('http://localhost:4500/api/auth/signup', { email, password });

const { accessToken, refreshToken, user } = response.data;

localStorage.setItem('accessToken', accessToken);
localStorage.setItem('refreshToken', refreshToken);
localStorage.setItem('user', JSON.stringify(user));

setUser(user);
navigate('/');
} catch (error) {
console.error('Error signing up:', error);
throw new Error('Failed to sign up');
}
};

const signOut = async () => {
localStorage.removeItem('accessToken');
localStorage.removeItem('refreshToken');
localStorage.removeItem('user');
setUser(null);
setIsAdmin(false);
navigate('/login');
};

const resetPassword = async (email: string) => {
try {
const response = await axios.post('http://localhost:4500/reset-password', { email });

if (response.status !== 200) {
throw new Error('Failed to send reset email');
}
} catch (error) {
console.error('Error resetting password:', error);
throw new Error('Failed to send reset email');
}
};

const updatePassword = async (password: string) => {
try {
const response = await axios.post('http://localhost:4500/update-password', { password });

if (response.status !== 200) {
throw new Error('Failed to update password');
}
} catch (error) {
console.error('Error updating password:', error);
throw new Error('Failed to update password');
}
};

if (!isInitialized) {
return (



);
}

return (

{children}

);
};

export const useAuth = () => {
const context = useContext(AuthContext);
if (context === undefined) {
throw new Error('useAuth must be used within an AuthProvider');
}
return context;
};

import React from 'react';
import {
BrowserRouter as Router,
Routes,
Route,
Navigate,
} from 'react-router-dom';

import Navbar from './components/Navbar';
import Home from './pages/Home';
import Competition from './pages/Competition';
import Leaderboard from './pages/Leaderboard';
import Login from './pages/Login';
import ResetPassword from './pages/ResetPassword';
import Dashboard from './pages/admin/Dashboard';
import Registrations from './pages/admin/Registrations';
import Exams from './pages/admin/Exams';
import { AuthProvider, useAuth } from './pages/context/AuthContext';
import AdminLayout from './pages/AdminLayout';

const PrivateRoute = ({ children }) => {
const { user } = useAuth();
if (!user) {
return ;
}
if (user && user.role === 'admin') {
return ;
}
return children;
};

const AdminRoute = ({ children }) => {
const { user } = useAuth();
if (!user) {
return ;
}
return children;
};

const AppRoutes = () => {
return (





{/* Public/Protected routes */}


);
};

function App() {
return (





);
}

export default App;



Подробнее здесь: https://stackoverflow.com/questions/794 ... -many-ways