axios，用api登录，处理令牌

Question

我刚刚做出反应，试图找到一份工作。做测试任务，我需要用api和axios进行登录和注册。我从登录开始。我做了什么，我得到access_token，update_token，并在时间戳中过期。我不知道如何处理该令牌，如何存储它，重定向到其他页面。我试着谷歌，但似乎太复杂了。如果你能在接下来的步骤中给我任何建议，那将是很棒的。任何教程或帖子。

这是我的代码：

 handleClick(event) {
    event.preventDefault()
    const formdata = new FormData()
    formdata.append("username", this.state.userLogin.email)
    formdata.append("password", this.state.userLogin.email)
    axios
      .post(
        "http://dev.**************.com/auth/get-token",
        formdata,

        {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        },
      )
      .then(res => {
        console.log(res)
      })
      .catch(error => {
        console.log(error)
      })
  }

这是我的回答：

data:
access_token:"k0T*************nhN0EM1552651327"
expire:1552658527
update_token:"iZ6XX70M*************Nie1552651327"

Answer 1

您可以在axios全局实例中设置永久标头，如下所示：

import axios from 'axios'
// ...
axios.defaults.headers.common.Authorization = token;

您可以通过任何标题更改Authorization。每个请求都将包含此令牌。

如果在你的一个axios响应中，你会获得401状态;你可以尝试更新你的access_token并在axios全局实例中再次设置它。您甚至可以将用户重定向到登录页面。

对于视图登录部分：一旦您检索到您的令牌，您必须更改您的容器/屏幕（我假设）。如果你使用react-router（或其他路由器），你必须push到一个新的路线。如果你使用redux，你可以在你的一个reducer中存储一个authenticated布尔值并用它做条件渲染：阻止访问某些路由/组件。