This commit is contained in:
Андрей Дувакин 2024-10-05 10:22:43 +05:00
parent e345488763
commit 4c8aa58301
8 changed files with 155 additions and 149 deletions

View File

@ -1,7 +1,7 @@
import React from 'react';
import RoutesComponent from './AppRouter.jsx';
import { AuthProvider } from './AuthContext.jsx';
import { BrowserRouter as Router } from 'react-router-dom';
import React from "react";
import RoutesComponent from "./AppRouter.jsx";
import { AuthProvider } from "./AuthContext.jsx";
import { BrowserRouter as Router } from "react-router-dom";
const App = () => {
return (

View File

@ -1,12 +1,13 @@
import { Routes, Route, Navigate } from 'react-router-dom';
import Login from './pages/Login';
import PrivateRoute from './components/PrivateRoute';
import { Routes, Route, Navigate } from "react-router-dom";
import Login from "./pages/Login";
import Home from "./pages/Home.jsx";
import PrivateRoute from "./components/PrivateRoute";
const RoutesComponent = () => (
<Routes>
<Route path="/login" element={<Login />} />
<Route element={<PrivateRoute />}>
<Route path='/' />
<Route path="/" element={<Home />} />
</Route>
</Routes>
);

View File

@ -1,4 +1,4 @@
import React, { createContext, useContext, useState, useEffect } from 'react';
import React, { createContext, useContext, useState, useEffect } from "react";
const AuthContext = createContext();
@ -8,8 +8,8 @@ export const useAuth = () => {
export const AuthProvider = ({ children }) => {
const [isAuthenticated, setIsAuthenticated] = useState(() => {
const savedAuth = localStorage.getItem('isAuthenticated');
return savedAuth === 'true';
const savedAuth = localStorage.getItem("isAuthenticated");
return savedAuth === "true";
});
const login = () => {
@ -18,12 +18,12 @@ export const AuthProvider = ({ children }) => {
const logout = () => {
setIsAuthenticated(false);
localStorage.removeItem('token');
localStorage.removeItem('isAuthenticated');
localStorage.removeItem("token");
localStorage.removeItem("isAuthenticated");
};
useEffect(() => {
localStorage.setItem('isAuthenticated', isAuthenticated);
localStorage.setItem("isAuthenticated", isAuthenticated);
}, [isAuthenticated]);
return (

View File

@ -1,28 +1,31 @@
import axios from 'axios';
import axios from "axios";
const API_URL = 'http://localhost:8000/api';
const API_URL = "http://localhost:8000/api";
const getAuthToken = () => {
return localStorage.getItem('token');
return localStorage.getItem("token");
};
export const loginUser = async (loginData) => {
const params = new URLSearchParams();
params.append('grant_type', 'password');
params.append('username', loginData.login);
params.append('password', loginData.password);
params.append("grant_type", "password");
params.append("username", loginData.login);
params.append("password", loginData.password);
try {
const response = await axios.post(`${API_URL}/token`, params, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Accept': 'application/json',
"Content-Type": "application/x-www-form-urlencoded",
Accept: "application/json",
},
});
console.log(response.data);
return response.data;
} catch (error) {
console.log('Ошибка при запросе:', error.response ? error.response.data : error);
console.log(
"Ошибка при запросе:",
error.response ? error.response.data : error
);
throw error.response ? error.response.data : error;
}
};
@ -32,13 +35,16 @@ export const getAccessories = async () => {
const token = getAuthToken();
const response = await axios.get(`${API_URL}/accessories`, {
headers: {
'Authorization': `Bearer ${token}`,
'Accept': 'application/json',
Authorization: `Bearer ${token}`,
Accept: "application/json",
},
});
return response.data;
} catch (error) {
console.error('Ошибка при запросе аксессуаров:', error.response ? error.response.data : error);
console.error(
"Ошибка при запросе аксессуаров:",
error.response ? error.response.data : error
);
throw error.response ? error.response.data : error;
}
};

View File

@ -1,6 +1,6 @@
import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';
import { useAuth } from '../AuthContext.jsx';
import React from "react";
import { Navigate, Outlet } from "react-router-dom";
import { useAuth } from "../AuthContext.jsx";
const PrivateRoute = () => {
const { isAuthenticated } = useAuth();

View File

@ -1,8 +1,8 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById('root'));
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />

View File

@ -1,10 +1,7 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect } from "react";
const Home = () => {
return <div>sadvsgrhgrtshte</div>;
};
return (
<div>
sadvsgrhgrtshte
</div>
)
}
export default Home;

View File

@ -1,25 +1,25 @@
import React, { useState } from 'react';
import { loginUser } from '../api';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../AuthContext'; // Подключаем AuthContext
import React, { useState } from "react";
import { loginUser } from "../api";
import { useNavigate } from "react-router-dom";
import { useAuth } from "../AuthContext";
const Login = () => {
const [login, setLogin] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const [login, setLogin] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState("");
const navigate = useNavigate();
const { login: authenticate } = useAuth(); // Вытаскиваем метод login из контекста
const { login: authenticate } = useAuth();
const handleSubmit = async (e) => {
e.preventDefault();
try {
const userData = await loginUser({ login, password });
localStorage.setItem('token', userData.access_token);
localStorage.setItem("token", userData.access_token);
authenticate();
navigate('/');
navigate("/");
} catch (error) {
setError(error.detail ? error.detail : 'Ошибка авторизации');
setError(error.detail ? error.detail : "Ошибка авторизации");
}
};
@ -50,7 +50,9 @@ const Login = () => {
required
/>
</div>
<button type="submit" className="btn btn-primary btn-block">Войти</button>
<button type="submit" className="btn btn-primary btn-block">
Войти
</button>
</form>
</div>
);