Ok, entonces tengo un Login.js que tiene la función onSubmit que redirige la página a 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);
});
}

Esta es la respuesta que obtengo ingrese la descripción de la imagen aquí

Así que ahora, en UploadScreen.js hay otro punto final al que llamo, el punto final http: //127.0. 0.1: 8000 / api / materials (GET) pero no puedo acceder a él porque necesito un token, y ese token se proporciona con la respuesta que obtuve anteriormente como se destacó.

En cartero, es así ingrese la descripción de la imagen aquí No podré obtener nada si no proporciono el token

Entonces mi primera pregunta es:

¿Cómo puedo agregar el token que obtuve de la función onSubmit anterior que se encuentra en Login.js a esta solicitud GET que quiero enviar ahora? (Estoy en UploadScreen.js)

Y mi segunda pregunta es:

¿Qué sucede si quiero obtener el uuid en esa respuesta (como se resalta) y convertirlo en el valor de un Form.Input, por ejemplo, y esa entrada de formulario se encuentra en un archivo js diferente?

class UploadScreen extends Component {
    constructor(){
        super();
        this.state={
          profile_id: '',
          errors: {}
        }
       }

   <Form.Input
     type='text'
     name='profile_id'
     value={} <<< what should I do, to be able to make the value to the uuid(in response, and make it appear as the placeholder of the input

Pido disculpas por mi inglés y espero que alguien pueda ayudarme con una respuesta específica porque soy nuevo en React Programming. Gracias

0
eibersji 15 sep. 2018 a las 10:22

3 respuestas

La mejor respuesta

Puede guardarlo en localStorage y luego configurarlo como encabezados predeterminados para que luego pueda usarlo en el servidor para verificar si el usuario está autenticado o no para esa solicitud en particular.

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
        }) 
    }

Usted 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']
    }
}

Ahora en el servidor como express.js puedes

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()
    }
  }
})

Ahora, el único problema que queda es cuando el usuario actualiza la página y luego los encabezados se restablecerán para que pueda (en su index.js donde todas las rutas se importan y se representan (render<Router>....</Router>,document.getElementById('root'))

....
 if(localStorage.getItem('jwt')){
   setToken('token',localStorage.getItem('jwt'))
 }
....
1
Rajan Lagah 15 sep. 2018 a las 07:38

Siempre puede establecer el estado de su token (primero debe crear un estado vacío para el token) y luego pasarlo como accesorios a otro componente.

Y puedes acceder a tu token a través de

console.log(response.data.current_user.token)
0
Jaz 15 sep. 2018 a las 07:54

A juzgar por la cantidad de información que proporcionó, esto es lo que entendí.

Llama a una API y navega para cargar la pantalla, pero necesita algunos datos de la API que ya deberían estar presentes en la pantalla de carga para que pueda realizar más acciones.

Por lo tanto, se le pedirá que pase parámetros adicionales a la pantalla a la que está navegando. Suponiendo que está utilizando react-router (y si no lo está, lo recomendaré, hace que la ruta sea más fácil)

Ahora, suponiendo que tenga el objeto history ya dentro del alcance, puede hacer:

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

Y ahora cuando console.log(this.props.location.token) puedes encontrar el valor que puedes usar

Espero que esto ayude.

1
Aseem Upadhyay 15 sep. 2018 a las 07:45