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

标签 php mysql reactjs axios

我正在使用 React 和 PHP,我需要它来做一些特定的事情。我正在使用 Axios 向我的 PHP 页面发送请求,然后更改我的数据库。我需要更新我的 MySQL 数据库表,如果用户关闭页面或浏览器,则将 is_logged 值从 true 更改为 false 。执行此操作的代码在窗口的 beforeunload 事件中设置。但是,数据库永远不会更新。我想要做的事情在 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;

最佳答案

需要处理的问题:

请求是否已发送?

尝试运行

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 能够做到的事情。我并不是说永远不应该使用客户端框架。我只是说,我见过程序员盲目迷恋客户端框架和技术,最终毁掉了他们所从事的项目。因此,当您选择客户端技术堆栈时,值得检查客户端所需的功能、不使用客户端框架实现它所需的时间以及使用您可能考虑的每个框架实现它所需的时间使用。比较两者并考虑截止日期和财务能力。如果您找不到使用客户端框架的明显且很好的理由,那么我建议不要使用它。因为,归根结底,如果在开发过程中由于某种原因您需要使用客户端框架,您可以轻松地从不使用框架的位置转向它。但是,如果您正在使用客户端框架,并且事实证明它对您的项目不可行,那么重构整个项目以不使用该框架通常意味着重新实现大部分客户端。而且这种问题往往不会在紧急情况下显现出来。

关于php - 如何在React中使用窗口的beforeunload事件执行axios代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63617634/

相关文章:

php - 检测空的子数组-无效的foreach

php - 在 Controller 中使用模型函数

php - MySQL 显示带有Where 条件的数据库

reactjs - 从 react 中的对象数组中获取第一个对象

javascript - 无法从 Spring Boot 过滤器在 http header 中发送 "Unauthorized"

javascript - 使用2个栈实现队列

php - 如何使用符号访问内存变量 a

mysql - 数据库结构 - 属于多个团队的用户

MySQL 查找 if 中满足哪个条件

Javascript。带有 React 的可拖动 div