如何在axios中使用基于令牌的身份验证并做出反应

Question

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

Answer 1

这完全取决于您的API设置使用令牌的方式。一般来说，尽管您可以通过axios中的headers属性传递令牌。

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

Answer 2

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

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

工厂端点接受两个参数，id路径参数和token查询参数。

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

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', {
      params: {
        token: 'YOURTOKEN'
      }
    })
      .then(res => {
        console.log(res)
      })
      .catch(e => console.log(e))
}

Answer 3

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

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

小笔记-不要通过查询参数发送令牌。