._.
This commit is contained in:
parent
e345488763
commit
4c8aa58301
@ -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 (
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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 (
|
||||
|
||||
30
src/api.jsx
30
src/api.jsx
@ -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;
|
||||
}
|
||||
};
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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 />
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user