ReactJs, как передать Axe ios мой токен для получения данных из API - PullRequest
Новая
       4

ReactJs, как передать Axe ios мой токен для получения данных из API

0 голосов
/ 28 марта 2020

Как дать топору ios мой токен, чтобы использовать его для операции GET, а не только для PUT или POST. Я использую ReactJs с Redux.

Используется эта вершина: "ax ios": "^ 0.19.2" "Reaction-redux": "^ 7.2.0"

Вот код, который работает, но я хочу ограничить безопасность, а в бэкэнде в django класс permition_class равен =mission_classes = (permissions.IsAuthenticated,).

Когда эта функция активирована, я получаю эту ошибку:

createError. js: 16 Uncaught (в обещании) Ошибка: запрос не выполнен с кодом состояния 401 

import React from "react";
import axios from "axios";
import TableData from "../../componentes/TableData";
import CustomForm from "../../componentes/FormCliente";
import Modal from "../../componentes/Modal";

class ClienteList extends React.Component {
  state = {
    articles: []
  };

  fetchArticles = () => {
    axios.get("http://192.168.196.49:8000/clientes/api/").then(res => {
      this.setState({
        articles: res.data

      });
    });
  }

  componentDidMount() {
    this.fetchArticles();
   }

  componentWillReceiveProps(newProps) {
    if (newProps.token) {
      this.fetchArticles();      
    }
  }

  render() {

    const dummy = event => {
      console.log('mostrando dummy:', event.target.id);
    }

    //console.log("DEBUG_ClientesListView_noFOR:", this.state.articles )

    const encabezado = [

        {
          label: 'Cliente',
          field: 'nombre',
          sort: 'asc',
          width: 150
        },
        {
          label: 'Fecha de alta',
          field: 'fecha_alta',
          sort: 'asc',
          width: 270
        },
        {
          label: 'Herramientas',
          field: 'id',
          sort: 'asc',
          width: 270
        }

      ];

    return (
      <div>
        <TableData data={this.state.articles} Encabezado={encabezado}/> <br />
        <h2> Create an article </h2>
        <CustomForm requestType="post" articleID={null} btnText="Create" />
        <Modal />
        <button id="dummy" onClick={dummy}>Dummy button</button>

      </div>
    );
  }
}

export default ClienteList;

1 Ответ

0 голосов
/ 29 марта 2020

Я нашел решение. С помощью Connect вы можете получить доступ к магазину Redus и получить свой токен.

Вот код: 

import React from "react";
import axios from "axios";
import TableData from "../../componentes/TableData";
import CustomForm from "../../componentes/FormCliente";
import Modal from "../../componentes/Modal";
//Función que conecta un componente a Redux store.
import { connect } from "react-redux";

class ClienteList extends React.Component {
  state = {
    articles: []
  };

  fetchArticles = () => {
    axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
    axios.defaults.xsrfCookieName = "csrftoken";
    axios.defaults.headers = {
      "Content-Type": "application/json",
      Authorization: `Token ${this.props.token}`,
    };
    axios.get("http://192.168.196.49:8000/clientes/api/").then(res => {
      this.setState({
        articles: res.data
      });
    });
  }

  componentDidMount() {
    this.fetchArticles();
   }

  componentWillReceiveProps(newProps) {
    if (newProps.token) {
      this.fetchArticles();      
    }
  }

   render() {
    console.log("Token_desde_connect:", this.props.token);


    const dummy = event => {
      console.log('mostrando dummy:', event.target.id);
    }


      const encabezado = [

        {
          label: 'Cliente',
          field: 'nombre',
          sort: 'asc',
          width: 150
        },
        {
          label: 'Fecha de alta',
          field: 'fecha_alta',
          sort: 'asc',
          width: 270
        },
        {
          label: 'Herramientas',
          field: 'id',
          sort: 'asc',
          width: 270
        }

      ];

    return (
      <div>
        <TableData data={this.state.articles} Encabezado={encabezado}/> <br />
        <h2> Create an article </h2>
        <CustomForm requestType="post" articleID={null} btnText="Create" />
        <Modal />
        <button id="dummy" onClick={dummy}>Dummy button</button>

      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    token: state.token
  };
};

export default connect(mapStateToProps)(ClienteList);
...