即时聊天应用:我如何检查用户没有绕过连接页面？

Question

我正处于使用Socket.io & React路由器开发一个基本的React即时聊天消息的最后阶段，以教会自己一些核心概念。

我一直在GitHub上使用这个项目作为参考：https://github.com/simpletut/react-real-time-chat-app

这里有一个实时版本：https://react-chatapp-frontend.herokuapp.com/

我正在使用Reacti-路由器将用户从连接页面(在其中，他们可以选择用户名和空间，然后将用户名和空间作为变量添加到URL )重定向到聊天页面。

即。使用用户名“john”加入“room1”的用户将被重定向到：http://localhost:3000/chat/room1/john

function App() {
  return (
    <div className="App">

      <Router>
        <Routes>
          <Route path="/chat/:room/:name" element={<Chat />} />
          <Route path="/" element={<Join />} />
        </Routes>
      </Router>

    </div>
  );
}

但是，目前没有什么可以阻止用户进入聊天室而不被从联接页面重定向。这也意味着用户只需输入一个URL就可以“创建”房间。我希望用户被重定向到连接页面或根目录，或者只是在没有被重定向的情况下无法访问聊天室。

在我的聊天页面中，我使用useParams()获取路由参数，然后加入房间。

  let { name, room } = useParams();

  const [currentUser, updateUser] = useState(name);
  const [currentRoom, updateCurrentroom] = useState(room);
  const [users, updateUsers] = useState([]);
  const [currentMessage, updateCurrentMessage] = useState('');

  const formRef = useRef(null);

  useEffect(() => {
    socket.on("receive_message", (data) => {
      addMessage(prevMessages => {
        return [...prevMessages, {
          username: data.username,
          time: new Date(),
          message: data.message
        }]
      })
    });

    
    socket.emit("join_room", {username: currentUser, room: room}, (err) => {
      if (err){
        console.log(err);
      }
    });

我已经看过参考代码好几次了，只是不知道他们做了什么不同的工作，这给了他们这个验证。有人知道如何最好地实现这一点吗？

Answer 1

我认为当您重定向到聊天室页面时，可以尝试在历史中添加一些状态：

navigate('/chat/room1/john', {state: {from: JOIN_PAGE}})

然后，您可以在聊天室组件中检查from值：

const location = useLocation();
if (location.state.from !== JOIN_PAGE) {
  navigate(JOIN_PAGE)
}

Answer 2

您还可以将用户所在的房间存储在某个地方(例如，使用redux的)。

如果你有这个信息，你可以有一个共享的路线，

<Route path="/chat" element={<Chat />} />

然后处理状态，比如加载房间或其他东西，然后获取用户在组件" chat“中的聊天信息。

const roomOfCurrentUser = useSelector(getCurrentRoomSelector());

或

直接传递状态下的房间标识符

navigate('/chat', {state: {roomId: 123}})

如果您仍然希望使用带有房间和用户名称的路由，则仍然可以存储已存在的当前聊天，如果聊天不存在，还可以向用户显示一些错误或重定向。