第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會有你想問的

如何在React中使用窗口的beforeunload事件執(zhí)行axios代碼

如何在React中使用窗口的beforeunload事件執(zhí)行axios代碼

PHP
鳳凰求蠱 2023-11-03 16:47:31
我正在使用 React 和 PHP,我需要它來做一些特定的事情。我正在使用 Axios 向我的 PHP 頁面發(fā)送請求,然后更改我的數(shù)據(jù)庫。我需要更新我的 MySQL 數(shù)據(jù)庫表,如果用戶關(guān)閉頁面或?yàn)g覽器,則將is_logged值從true更改為false 。執(zhí)行此操作的代碼在窗口的beforeunload事件中設(shè)置。但是,數(shù)據(jù)庫永遠(yuǎn)不會更新。我想要做的事情在 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 頁面:<?phprequire '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;
查看完整描述

2 回答

?
蕪湖不蕪

TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超7個(gè)贊

需要處理的問題:


請求是否已發(fā)送?

嘗試跑步


axios.get('http://localhost/live-streaming-app/get_viewers.php?=')

  .then(response => console.log(response))

在瀏覽器控制臺中查看控制臺中是否記錄了任何內(nèi)容。還要檢查開發(fā)工具中的“網(wǎng)絡(luò)”選項(xiàng)卡,以查看是否發(fā)送了請求。如果請求已發(fā)送,則請求的發(fā)送有效。如果沒有,則說明 URL 存在一些問題,需要修復(fù)。


代幣

發(fā)送此請求


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

  .then(response => console.log(response))

表示空字符串的值為token。另一方面,您的 PHP 代碼假設(shè)有一個(gè)名為 的參數(shù)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 代碼的假設(shè),您需要指定token名為 的參數(shù)的值token:


  window.addEventListener("beforeunload", () => {

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

      .then(response => console.log(response))

  })

上面的修復(fù)應(yīng)該可以解決您所詢問的問題,但我們不要就此停止。


SQL注入

如果我從瀏覽器控制臺(或 cURL)發(fā)送此請求(不要運(yùn)行它,除非您創(chuàng)建備份)會怎樣:


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

  .then(response => console.log(response))

?


然后你的 PHP 代碼將執(zhí)行:


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

viewers從數(shù)據(jù)庫中刪除所有內(nèi)容。使用PDO參數(shù)化您的查詢并使您的查詢免受此類攻擊。


概括

React 是一個(gè) Javascript 框架,這意味著無論 Javascript 能做什么,你的客戶端也能做到。確實(shí),某些功能不一定以 React 方式可用,但假設(shè) Javascript 能夠做到這一點(diǎn),那么您不必?fù)?dān)心這些功能是否可行。我傾向于認(rèn)為,當(dāng)客戶端發(fā)生很多事情時(shí),客戶端框架將變得不太有用,并且我認(rèn)為客戶端框架流行的主要原因是大多數(shù)程序員沒有意識到有多少Javascript 能夠做到的事情。我并不是說永遠(yuǎn)不應(yīng)該使用客戶端框架。我只是說,我見過程序員盲目迷戀客戶端框架和技術(shù),最終毀掉了他們所從事的項(xiàng)目。因此,當(dāng)您選擇客戶端技術(shù)堆棧時(shí),值得檢查客戶端所需的功能、不使用客戶端框架實(shí)現(xiàn)它所需的時(shí)間以及使用您可能考慮的每個(gè)框架實(shí)現(xiàn)它所需的時(shí)間使用。比較兩者并考慮截止日期和財(cái)務(wù)能力。如果您找不到使用客戶端框架的明顯且很好的理由,那么我建議不要使用它。因?yàn)?,歸根結(jié)底,如果在開發(fā)過程中由于某種原因您需要使用客戶端框架,您可以輕松地從不使用框架的位置轉(zhuǎn)向它。但是,如果您正在使用客戶端框架,并且事實(shí)證明它對您的項(xiàng)目不可行,那么重構(gòu)整個(gè)項(xiàng)目以不使用該框架通常意味著重新實(shí)現(xiàn)大部分客戶端。而這種問題往往不會在緊急情況下顯現(xiàn)出來。


查看完整回答
反對 回復(fù) 2023-11-03
?
慕森卡

TA貢獻(xiàn)1806條經(jīng)驗(yàn) 獲得超8個(gè)贊

無法保證事件中執(zhí)行的異步操作beforeunload將會完成,axios 使用異步方式發(fā)出請求。


您或許可以使用老式的 XHR 來發(fā)出同步請求。如果您轉(zhuǎn)到標(biāo)記為 的部分Adapting Sync XHR use cases to the Beacon API,他們將討論在卸載期間保持請求活動(dòng)的策略,因?yàn)橥?XHR 已被棄用。


請注意,同步 HTTP 請求通常不是一個(gè)好主意,因?yàn)樗鼈儠谕瓿蓵r(shí)導(dǎo)致頁面無響應(yīng)。我不確定卸載期間同步請求的行為是什么。


同步請求示例


logUser () {

    var params = JSON.stringify({ locked_by: '' });

    let xhr = new XMLHttpRequest()

    xhr.open('PUT',Url, false) // `false` makes the request synchronous

    xhr.setRequestHeader("Authorization", 'Bearer ' + localStorage.getItem('app_access_token'))

    xhr.setRequestHeader("Content-length", params.length);

    xhr.setRequestHeader("Content-type", "application/json; charset=utf-8")

    xhr.responseType = 'arraybuffer'

    xhr.onreadystatechange = function() {//Call a function when the state changes.

    if(xhr.readyState == 4 && xhr.status == 200) {

        alert(xhr.responseText);

    }

}


筆記


沒有可靠的方法可以在選項(xiàng)卡/窗口關(guān)閉時(shí)執(zhí)行某些操作。這違背了“關(guān)閉”選項(xiàng)卡(即釋放資源)的原則。


我處理你的情況的方法是讓前端保存一些在選項(xiàng)卡關(guān)閉時(shí)自行消失的東西。


要么打開一個(gè)可用于許多其他目的的 websocket,當(dāng)它死機(jī)并且在幾秒鐘內(nèi)沒有返回時(shí),您就知道客戶端已斷開連接,或者在選項(xiàng)卡打開時(shí)以及錯(cuò)過了某個(gè)時(shí)間時(shí)發(fā)送常規(guī) ping幾次 ping 操作后,您就可以安全地假設(shè)客戶端已斷開連接。


查看完整回答
反對 回復(fù) 2023-11-03
  • 2 回答
  • 0 關(guān)注
  • 313 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號