我在获取令牌时遇到问题。如何在 Login.jsx 组件中获取令牌。
我希望在成功登录后获得令牌。当我输入 localStorage.getItem('token'); 时,它在控制台中显示“null”在控制台中。
这个项目是一个聊天应用程序。成功登录并获取令牌后,我将导航到 chat.jsx 组件,然后当我获取令牌时,我将在 chat.jsx 组件中获取消息,但在获取令牌之前我无法执行此操作。
这是我的 Login.jsx 组件和 Chat.jsx 组件。 Chat.jsx 组件尚未完成。
我在 Login.jsx 中的代码是:
import React, { useState } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
const Login = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const navigate = useNavigate();
const handleSubmit = async (e) => {
e.preventDefault();
setError('');
try {
const response = await axios.post('https://chatify-api.up.railway.app/auth/token', {
username,
password
});
console.log(response.data);
if (response.status === 200) {
const { token, userId, avatar } = response.data;
// Kontrollera om token existerar
if (token) {
// Spara användaruppgifterna i localStorage
localStorage.setItem('user', JSON.stringify({
userId,
username,
avatar,
token
}));
// Navigera till chattsidan
navigate('/chat');
} else {
setError('No token received from server');
}
}
} catch (error) {
console.error('Login error:', error);
if (error.response && error.response.status === 401) {
setError('Invalid credentials');
} else {
setError('Login failed');
}
}
};
return (
<div className="auth-form-container">
<h2>Login</h2>
<form className="login-form" onSubmit={handleSubmit}>
<label htmlFor="username">Username</label>
<input
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
required
/>
<label htmlFor="password">Password</label>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
<button type="submit">Login</button>
</form>
{error && <p className="error" style={{ color: 'red' }}>{error}</p>}
<button className="link-btn" onClick={() => navigate('/register')}>Don't have an account? Register here.</button>
</div>
);
};
export default Login;
我在 Chat.jsx 中的代码:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import DOMPurify from 'dompurify';
const Chat = () => {
const [messages, setMessages] = useState([]);
const [newMessage, setNewMessage] = useState('');
const authData = JSON.parse(localStorage.getItem('user'));
const token = authData?.token;
const username = authData?.username;
const avatar = authData?.avatar;
useEffect(() => {
const fetchMessages = async () => {
try {
const response = await axios.get('https://chatify-api.up.railway.app/messages', {
headers: { Authorization: `Bearer ${token}` }
});
setMessages(response.data);
} catch (error) {
console.error('Failed to fetch messages:', error);
}
};
fetchMessages();
}, [token]);
// Funktion för att skicka ett nytt meddelande
const handleSendMessage = async () => {
if (newMessage.trim() === '') return;
const sanitizedMessage = DOMPurify.sanitize(newMessage);
try {
const response = await axios.post(
'https://chatify-api.up.railway.app/messages',
{ content: sanitizedMessage },
{
headers: {
Authorization: `Bearer ${token}`,
'Content-Type': 'application/json'
}
}
);
setMessages((prevMessages) => [...prevMessages, response.data]);
setNewMessage('');
} catch (error) {
console.error('Failed to send message:', error);
}
};
// Funktion för att radera ett meddelande
const handleDeleteMessage = async (messageId) => {
try {
await axios.delete(`https://chatify-api.up.railway.app/messages/${messageId}`, {
headers: { Authorization: `Bearer ${token}` }
});
setMessages((prevMessages) => prevMessages.filter((msg) => msg.id !== messageId));
} catch (error) {
console.error('Failed to delete message:', error);
}
};
return (
<div>
<h2>Chat</h2>
{avatar && <img src={avatar} alt="Avatar" />}
<p>{username}</p>
<div>
{messages.map((msg) => (
<div
key={msg.id}
className={msg.userId === authData.userId ? 'my-message' : 'other-message'}
style={{
display: 'flex',
justifyContent: msg.userId === authData.userId ? 'flex-end' : 'flex-start',
}}
>
<div>
<p>{msg.text}</p>
{msg.userId === authData.userId && (
<button onClick={() => handleDeleteMessage(msg.id)}>Delete</button>
)}
</div>
</div>
))}
</div>
<input
type="text"
value={newMessage}
onChange={(e) => setNewMessage(e.target.value)}
placeholder="Type a message"
/>
<button onClick={handleSendMessage}>Send</button>
</div>
);
};
export default Chat;
如果您的响应中存在令牌,您可能应该进行控制台,我建议逐步调试。
const handleSubmit = async (e) => {
e.preventDefault();
setError("");
try {
const response = await axios.post(
"https://chatify-api.up.railway.app/auth/token",
{
username,
password,
}
);
console.log(response.data)
if (response.status === 200) {
const { token, userId, avatar } = response.data;
if (token) {
localStorage.setItem(
"user",
JSON.stringify({
userId,
username,
avatar,
token,
})
);
navigate("/chat");
} else {
setError("No token received from server");
}
}
} catch (error) {
console.error("Login error:", error);
setError(
error.response?.status === 401 ? "Invalid credentials" : "Login failed"
);
}
};