如何使用React在Chat.jsx组件中获取令牌

Question

我在获取令牌时遇到问题。如何在 Chat.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;

Answer 1

如果您的响应中存在令牌，您可能应该进行控制台，我建议逐步调试。

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"
    );
  }
};