小编Sea*_*ean的帖子

我读过一些关于 JWT 刷新令牌及其使用方式/原因的文章。我在这里看到提到的一件事： https: //hasura.io/blog/best-practices-of-using-jwt-with-graphql/#persistance和这里​​： https: //dev.to/cotter/localstorage-vs -cookies-all-you-need-to-know-about-storing-jwt-tokens-securely-in-the-front-end-15id

使用刷新令牌可以减轻 CSRF 攻击。第一篇文章指出：

刷新令牌由身份验证服务器作为 HttpOnly cookie 发送到客户端，并由浏览器在 /refresh_token API 调用中自动发送。由于客户端 Javascript 无法读取或窃取 HttpOnly cookie，因此这比将其保留为普通 cookie 或保存在本地存储中更能缓解 XSS。这种方法也可以免受 CSRF 攻击，因为即使表单提交攻击可以进行 /refresh_token API 调用，攻击者也无法获取返回的新 JWT 令牌值。

第二篇文章也说了类似的话：

尽管提交的表单/refresh_token将起作用并且将返回新的访问令牌，但如果攻击者使用 HTML 表单，则他们无法读取响应

我正在努力了解这将如何防止 CSRF 攻击，因为我在想以下内容：

1. 从另一个域向用户发出的请求/refresh token将向用户返回新的 JWT 令牌。我假设它存储在 HttpOnly cookie 中（如第一篇文章中所做的那样）
2. 由于 CSRF 不涉及任何 javascript 注入，且 cookie 为 httpOnly，因此攻击者无法读取新 JWT 令牌的值。
3. 但是，如果 JWT 令牌再次存储在 cookie 中，CSRF 攻击者肯定可以使用这个新 cookie 以及新的 JWT 令牌发送另一个请求吗？

如果我的理解是正确的，我正在努力了解如何使用刷新令牌来防止 CSRF 攻击。有人可以准确解释为什么刷新令牌可以防止 CSRF 攻击，以及为什么 CSRF 攻击者不能只使用用户收到的新 JWT …

useEffect我在功能组件中使用反应钩子，并且想知道当您不指定依赖项时它的用途是什么。我知道文档声明它用于副作用，但我的问题是为什么这些副作用不能在功能组件内使用纯 JS 运行？作为一个非常基本的示例，我正在使用以下代码：

import {useEffect, useState} from 'react'

function Child () {

  const [clickCount, updateCount] = useState(0)

  console.log('Run outside of useEffect')

  useEffect(()=>{
    console.log("Run inside of useEffect")
  })


  return (

    <button onClick = {() => updateCount(clickCount+1)}> Child COmponent </button>
  )
}

export default Child

正如您所期望的那样，它基本上只是一个普通的 JS 函数，在每次由单击按钮引起的重新渲染时，console.log都会执行这两个函数。

我理解为什么您可能想要useEffect在如下情况下使用，您只想useEffect在某些特定更改时运行：

import {useEffect, useState} from 'react'

function Child () {

  const [clickCount, updateCount] = useState(0)

  console.log('Run outside of useEffect')

  //this now only runs when `someVariable` changes
  useEffect(()=>{ …

我正在尝试更新我的 redux 状态的一部分，其中包含嵌套在另一个对象中的两个对象。通常，当不可变地更新 javascript 对象时，我会使用扩展运算符，然后按如下方式定义任何更改：

state = {...state, property1: newvalue} 

但是，当我有嵌套对象时，我不确定如何使用扩展运算符。这是相关的代码和我的尝试：

const squadDatabase = {currentSquad: {
    0: null,
    1: null,
    2:null

    }, newAdditions: null}

export default (state=initial_squad, action)=>{

    switch(action.type){
        case ADD_PLAYER_TO_SQUAD:
            return {...state, currentSquad[action.payload.currentSquadMemberId]:action.payload.newSquadAdditionId, newAdditions: action.payload.newSquadAdditionId}
        default:
            return initial_squad
    }
}

有没有人知道如何使用扩展运算符或其他方式不可变地更新嵌套的 javascript 对象？

我试图覆盖语义UI的CSS样式，但是，即使我为相关的类指定了特定的类名，它也无法正常工作。这是我的代码：

return (
    <div className="ui grid">
        <div className="three column row">
            <div className="four wide column" ></div>
            <div className="text eight wide column"> <h1>Team Selection</h1></div>
            <div className="four wide column"></div>    
        </div>
        <div className= "three column row">
            <div className="four wide column"></div>
            <div className="eight wide column" style={style1}> </div>
            <div className="four wide column"></div>
        </div>
    </div>  
)

CSS文件：

.text {
    display: flex;
    justify-content: center;
}

我知道 React 组件内的嵌套函数或回调（例如 setTimeout）存在陈旧状态问题。例如，在下面的代码（取自 React 文档）中，我们看到了陈旧状态的问题：

\n

如果您首先单击 \xe2\x80\x9cShow Alert\xe2\x80\x9d，然后递增计数器，\nalert 将显示您单击 \xe2\x80\x9cShow\nalert\xe2\x80 时的计数变量\x9d 按钮。”

\n

function Example() {\n  const [count, setCount] = useState(0);\n\n  function handleAlertClick() {\n    setTimeout(() => {\n      alert('You clicked on: ' + count);\n    }, 3000);\n  }\n\n  return (\n    <div>\n      <p>You clicked {count} times</p>\n      <button onClick={() => setCount(count + 1)}>\n        Click me\n      </button>\n      <button onClick={handleAlertClick}>\n        Show alert\n      </button>\n    </div>\n  );\n}\n

我知道我们可以使用以下方法创建对最新/当前状态值的可变引用useRef：

function Example() {\n  const [count, setCount] = useState(0);\n  const stateRef = useRef()\n …