Reactjs 如何在axios和react中使用基于令牌的身份验证

有401错误（无效或未提供访问令牌），如何使用axios正确传递令牌，这是我的代码& API文档：

---

这完全取决于API如何设置以使用令牌。一般来说，您可以通过axios中的headers属性传入令牌

axios.get("https://trefle.io//api/plants/${id}", {
   headers: {
      Authorization : yourtoken
   } 
})

从中，您首先需要请求一个客户端令牌，该令牌将返回JWT令牌，用于从客户端发出请求

// requst JWT token 
https://trefle.io/api/auth/claim?token=YOUR-TOKEN&origin=YOUR-WEBSITE-URL

工厂端点接受两个参数，

id

path参数和

token

query参数

componentDidMount = () => {

    axios.get('https://trefle.io/api/plants/103505?token=YOURTOKEN')
      .then(res => {
        console.log(res)
      })
      .catch(e => console.log(e))
}

您需要将令牌作为查询参数传递

componentDidMount = () => {

    axios.get('https://trefle.io/api/plants/103505?token=YOURTOKEN')
      .then(res => {
        console.log(res)
      })
      .catch(e => console.log(e))
}

或

---

这取决于您如何组织代码/体系结构

• 您可以将令牌存储在会话或本地存储器中，但每次进行呼叫时，您都需要将令牌通过报头传递，或者您可以创建一个拦截器来为您处理
• 您也可以将令牌存储在cookie中。如果您正在使用服务器端渲染（SSR）对节点运行React应用程序，这是很好的。在这种情况下，您不需要做任何事情，因为cookie是通过头自动发送的
• 您也可以将令牌存储在会话中，但如果您关心自动缩放，则需要使用Redis而不是内存存储，这样令牌将可用于运行应用程序的所有实例

---

小提示-不要通过查询参数发送令牌。

您正在尝试进行客户端身份验证，是否阅读了相关文档？@Ravisara awesome。这让你的功能发挥作用了吗？如果是API，那么就没有其他选择了，我的答案是一般性的。而问题明确地说，他得到了401。我不知道会话存储和cookies与此有什么关系。好吧，这只是一个观点，因为它不能回答问题？