php - 如何在 React 中使用窗口的 beforeunload 事件执行 axios 代码

Question

我正在使用 React 和 PHP，我需要它来做一些特定的事情。我正在使用 Axios 向我的 PHP 页面发送请求，然后更改我的数据库。我需要更新我的 MySQL 数据库表以更改 is_logged 来自 的值真实 至假 如果用户关闭页面或浏览器。执行此操作的代码设置在窗口的 中。卸载前事件。但是，数据库永远不会更新。我在 React 中尝试做的事情是否可行？
这是我的 React 组件代码:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Viewers from './Viewers';

const Live = ({ match }) => {

  window.addEventListener("beforeunload", () => {
    axios.get('http://localhost/live-streaming-app/get_viewers.php?=' + token)
      .then(response => console.log(response))
  })

  // Set token from url
  const token = match.params.token

  //Get the fullname and update logged_in to true
  const [fullname, setFullname] = useState("")

  useEffect(() => {
    axios.get('http://localhost/live-streaming-app/get_user.php?token=' + token)
      .then(response => {
        setFullname(response.data.fullname)
        console.log("Data", response.data)
      })
      .catch(error => console.log(error))

    return () => {
      axios.get('http://localhost/live-streaming-app/get_viewers.php?=' + token)
        .then(response => console.log(response))
        .catch(error => console.log(error))
    }
  }, [token])

  //Jsx for when user is unauthorised
  const rejected = (
    <div className="container text-center pt-5">
      <h1>Rejected Connection</h1>
      <p>You are unauthorised to view this page</p>
    </div>
  )

  let my_render = ""

  if (fullname && fullname != null) {
    my_render = <Viewers fullname={fullname} />
  } else {
    my_render = rejected
  }

  return my_render
};

export default Live;

这是调用的 PHP 页面:

<?php
require 'connect.php';

$token = $_GET['token'];

$sql = "UPDATE `viewers` SET `logged_in`='false' WHERE `live_token`='{$token}'";
if(mysqli_query($con, $sql)){
  http_response_code(201);
}
else {
  http_response_code(422);
}

exit;

Answer 1

需要处理的问题:
请求是否正在发送？
尝试运行

axios.get('http://localhost/live-streaming-app/get_viewers.php?=')
  .then(response => console.log(response))

在您的浏览器控制台中，查看控制台中是否记录了任何内容。检查开发工具中的网络选项卡以查看是否发送了请求。如果请求被发送，那么请求的发送工作。如果没有，那么您的 URL 有一些问题需要修复。
token
发送此请求

axios.get('http://localhost/live-streaming-app/get_viewers.php?=' + token)
  .then(response => console.log(response))

表示空字符串的值为 token .另一方面，您的 PHP 代码假定有一个名为 token 的参数。 :

<?php
require 'connect.php';

$token = $_GET['token']; //This is the line which assumes that a parameter called token exists

$sql = "UPDATE `viewers` SET `logged_in`='false' WHERE `live_token`='{$token}'";
if(mysqli_query($con, $sql)){
  http_response_code(201);
}
else {
  http_response_code(422);
}

exit;

为了符合您的 PHP 代码的假设，您需要指定 token是名为 token 的参数的值:

  window.addEventListener("beforeunload", () => {
    axios.get('http://localhost/live-streaming-app/get_viewers.php?token=' + token)
      .then(response => console.log(response))
  })

上面的修复应该可以解决您所询问的问题，但我们不要止步于此。
SQL 注入(inject)
如果我从浏览器控制台(或 cURL)发送此请求(除非您创建备份，否则不要运行它)怎么办:

axios.get("http://localhost/live-streaming-app/get_viewers.php?token=';delete from viewers where ''='")
  .then(response => console.log(response))

?
然后您的 PHP 代码将执行以下操作:

UPDATE `viewers` SET `logged_in`='false' WHERE `live_token`='';delete from viewers where ''=''

删除所有 viewers从您的数据库中。使用 PDO参数化您的查询并使您的查询免受此类攻击。
概括
React 是一个 Javascript 框架，这意味着任何 Javascript 都可以，您的客户端也可以。确实，某些功能不一定以 React 方式可用，但假设 Javascript 能够做到这一点，您不必担心这些功能是可能的。我倾向于认为当客户端发生很多事情时，客户端框架将变得不那么有用，我认为客户端框架流行的主要原因是大多数程序员没有意识到有多少Javascript 能够做的事情。我并不是说永远不应该使用客户端框架。我只是说我看到程序员是客户端框架和技术的盲目粉丝，最终破坏了他们从事的项目。因此，当您选择客户端技术堆栈时，值得检查客户端所需的功能、在没有客户端框架的情况下实现它所需的时间以及使用您可能考虑的每个框架实现它所需的时间使用。比较两者并考虑截止日期和财务能力。如果您找不到使用客户端框架的明显、非常好的理由，那么我建议您不要使用它。因为，归根结底，如果在开发过程中发现由于某种原因需要使用客户端框架，您可以轻松地从不使用框架的位置转移到它。但是，如果您使用的是客户端框架并且结果证明它对您的项目不可行，那么重构整个项目以不使用该框架通常意味着重新实现大部分客户端。而这种问题往往不会在紧急情况下显现出来。