Javascript 如何使用端点返回到React中另一个.js文件的JSON令牌响应

好的，我有一个

Login.js

，它有

onSubmit

功能，可以将页面重定向到

UploadScreen.js

：

Login.js：

onSubmit = (e) => {

  const errors = this.validate(this.state);
  this.setState({ errors });
  e.preventDefault();
  var apiBaseUrl = "http://127.0.0.1:8000/api/auth/login";
  var self = this;
  var payload={
      "email":this.state.email,
      "password":this.state.password
  }
  var config = {
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    withCredentials: false
  }

  axios.post(apiBaseUrl, payload, config)
  .then(function (response) {
    console.log(response);
    if(response.status == 200){
        browserHistory.push('/upload');
        self.setState({
          redirect_to_upload : true
        }) 
    }
    else if(response.status == 204){
        console.log("Username password do not match");
        alert("username password do not match")
    }
    else{
        console.log("Username does not exists");
        alert("Username does not exist");
    }
})
.catch(function (error) {
console.log(error);
});
}

这就是我得到的回应

所以现在，在UploadScreen.js中，我正在调用另一个端点，端点（GET），但我无法访问它，因为我需要一个令牌，该令牌与我先前获得的响应一起提供，如突出显示的

在《邮差》中，是这样的 如果我不提供代币，我将无法得到任何东西

所以我的第一个问题是：

如何将先前从onSubmit函数获得的位于Login.js中的令牌添加到我现在要发送的GET请求中？（我在UploadScreen.js中）

我的第二个问题是：

如果我想获取该响应上的uuid（如突出显示的）并使其成为一个Form.Input的值，并且该Form Input位于不同的js文件上，该怎么办

类上载屏幕扩展组件{
构造函数（）{
超级（）；
这个州={
配置文件\u id:“”，
错误：{}
}
}
您可以将其保存在localStorage中，然后将其设置为默认标头，以便稍后可以在服务器上使用它来验证用户是否已针对该特定请求进行了身份验证

axios.post(apiBaseUrl, payload, config)
  .then(function (response) {
    console.log(response);
    if(response.status == 200){
        localStorage.setItem('jwt',res.data.token);//add this
        setHeader(res.data.token);// add this
        browserHistory.push('/upload');
        self.setState({
          redirect_to_upload : true
        }) 
    }

您setHeader.js

import axios from 'axios'
import jwt from 'jsonwebtoken'

export default function setAuthToken(token){

    if(token){
        localStorage.setItem('jwt',token)
        axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
    }
    else{
        delete axios.defaults.headers.common['Authorization']
    }
}

现在，在像express.js这样的服务器上，您可以

app.post('baseUrl',function(req,res){
  var header = req.headers['authorization']
  if(header){
   var token = header.split(' ')[1]
   //verify your jwt here
   if(userIsAllowed){
     //process
     res.send('hello')
    }else{
      res.status(404).send()
    }
  }
})

现在唯一剩下的问题是，当用户刷新页面时，标题将被重置为您可以处理的处理方式（在您index.js中，所有路由都被导入并呈现（
render…，document.getElementById（'root'）
）


您可以将其保存在localStorage中，然后将其设置为默认标头，以便稍后可以在服务器上使用它来验证用户是否已针对该特定请求进行了身份验证

axios.post(apiBaseUrl, payload, config)
  .then(function (response) {
    console.log(response);
    if(response.status == 200){
        localStorage.setItem('jwt',res.data.token);//add this
        setHeader(res.data.token);// add this
        browserHistory.push('/upload');
        self.setState({
          redirect_to_upload : true
        }) 
    }

您setHeader.js

import axios from 'axios'
import jwt from 'jsonwebtoken'

export default function setAuthToken(token){

    if(token){
        localStorage.setItem('jwt',token)
        axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
    }
    else{
        delete axios.defaults.headers.common['Authorization']
    }
}

现在，在像express.js这样的服务器上，您可以

app.post('baseUrl',function(req,res){
  var header = req.headers['authorization']
  if(header){
   var token = header.split(' ')[1]
   //verify your jwt here
   if(userIsAllowed){
     //process
     res.send('hello')
    }else{
      res.status(404).send()
    }
  }
})

现在唯一剩下的问题是，当用户刷新页面时，标题将被重置为您可以处理的处理方式（在您index.js中，所有路由都被导入并呈现（
render…，document.getElementById（'root'）
）


从你提供的信息量来看，我的理解如下

您调用一个api并导航到上载屏幕，但是您需要来自api的一些数据，这些数据应该已经出现在上载屏幕上，以便您可以执行进一步的操作

因此，您需要向导航到的屏幕传递额外的参数。假设您使用的是
react router
（如果您不使用，我建议您使用，这样可以简化路由过程）

现在，假设您的
history
对象已经在作用域中，您可以执行以下操作-

this.props.history.push({pathname:'/upload', token: response.data.current_user.uuid})

现在当您
console.log（this.props.location.token）
时，您可以找到可以使用的值

希望这能有所帮助。
从您提供的信息量来看，以下是我的理解

您调用一个api并导航到上载屏幕，但是您需要来自api的一些数据，这些数据应该已经出现在上载屏幕上，以便您可以执行进一步的操作

因此，您需要向导航到的屏幕传递额外的参数。假设您使用的是
react router
（如果您不使用，我建议您使用，这样可以简化路由过程）

现在，假设您的
history
对象已经在作用域中，您可以执行以下操作-

this.props.history.push({pathname:'/upload', token: response.data.current_user.uuid})

现在当您
console.log（this.props.location.token）
时，您可以找到可以使用的值

希望这有帮助。
您可以始终设置令牌状态（首先您应该为令牌创建一个空状态），然后将其作为道具传递给另一个组件

您可以通过以下方式访问您的令牌：

console.log(response.data.current_user.token)

您可以始终设置令牌的状态（首先您应该为令牌创建一个空状态），然后将其作为道具传递给另一个组件

您可以通过以下方式访问您的令牌：

console.log(response.data.current_user.token)