fix(front)fix auth error reloading page

This commit is contained in:
2026-05-27 09:40:34 +03:00
parent 6938ee4505
commit fe2b30f48f
2 changed files with 19 additions and 26 deletions
+10 -11
View File
@@ -4,14 +4,12 @@ import { useNavigate } from "react-router-dom";
const AuthForm = () => { const AuthForm = () => {
const [formData, setFormData] = useState({ username: "", password: "" }); const [formData, setFormData] = useState({ username: "", password: "" });
const [message, setMessage] = useState({ text: "", isError: false });
const navigate = useNavigate(); const navigate = useNavigate();
const API_BASE = "/api"; const API_BASE = "/api";
const handleSubmit = async (e) => { const handleSubmit = async (e) => {
e.preventDefault(); e.preventDefault();
setMessage({ text: "", isError: false });
try { try {
const response = await axios.post(`${API_BASE}/login`, formData); const response = await axios.post(`${API_BASE}/login`, formData);
@@ -20,13 +18,16 @@ const AuthForm = () => {
if (data.token) { if (data.token) {
localStorage.setItem("token", data.token); localStorage.setItem("token", data.token);
localStorage.setItem("user", JSON.stringify(data.user)); localStorage.setItem("user", JSON.stringify(data.user));
localStorage.removeItem("error");
navigate("/"); navigate("/");
} }
} catch (err) { } catch (err) {
setMessage({ let errorMessage =
text: err.response?.data?.error || err.message || "Неверный логин или пароль", err.response?.data?.error || err.message || "Неверный логин или пароль";
isError: true, const errorLog = {
}); message: errorMessage,
};
localStorage.setItem("error", JSON.stringify(errorLog));
} }
}; };
@@ -61,11 +62,9 @@ const AuthForm = () => {
/> />
</div> </div>
{message.text && ( {localStorage.getItem("error") && (
<p <p className={`text-sm text-red-500`}>
className={`text-sm ${message.isError ? "text-red-500" : "text-green-500"}`} {JSON.parse(localStorage.getItem("error"))["message"] || ""}
>
{message.text}
</p> </p>
)} )}
+5 -11
View File
@@ -1,19 +1,11 @@
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { Command, Contact } from "lucide-react"; import { Command, Contact } from "lucide-react";
import { useState } from "react";
export default function Header({ onRefresh, onOpenScanner }) { export default function Header({ onRefresh, onOpenScanner }) {
const navigate = useNavigate(); const navigate = useNavigate();
const [isLogoutPromptOpen, setIsLogoutPromptOpen] = useState(false); const handleLogout = () => {
const openLogoutPrompt = () => {
setIsLogoutPromptOpen(true);
};
const handleLogoutClick = () => {
localStorage.clear(); localStorage.clear();
setIsLogoutPromptOpen(false);
navigate("/login"); navigate("/login");
}; };
@@ -62,14 +54,16 @@ export default function Header({ onRefresh, onOpenScanner }) {
Привет, {user?.first_name}! Привет, {user?.first_name}!
</span> </span>
</button> </button>
<div className="flex items-center justify-center">
<button <button
className="flex items-center justify-center w-5 h-5 gap-2 py-1.5 px-1.5 rounded-full bg-red-500 text-white text-xs font-bold uppercase shrink-0 select-none" className="flex items-center justify-center w-5 h-5 ml-2 gap-2 py-2 px-2 rounded-full bg-red-500 text-white text-xs font-bold uppercase shrink-0 select-none"
onClick={openLogoutPrompt} onClick={handleLogout}
> >
x x
</button> </button>
</div> </div>
</div> </div>
</div>
</header> </header>
); );
} }