Реагировать и DRF, вход в систему аутентификации JWT не удается - PullRequest
Новая
       0

Реагировать и DRF, вход в систему аутентификации JWT не удается

0 голосов
/ 22 апреля 2020

У меня есть Django rest API с аутентификацией JWT и React для фронта.

При попытке войти в систему пользователь получает запрос 403, в котором он должен вернуть пару токенов. 

import React, { Component } from "react";
import axiosInstance from "../axiosApi";

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = { username: "", password: "" };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleSubmitWThen = this.handleSubmitWThen.bind(this);
  }

  handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  handleSubmit(event) {
    event.preventDefault();
    try {
      const response = axiosInstance.post("/token/obtain/", {
        username: this.state.username,
        password: this.state.password,
      });
      axiosInstance.defaults.headers["Authorization"] =
        "JWT " + response.data.access;
      localStorage.setItem("access_token", response.data.access);
      localStorage.setItem("refresh_token", response.data.refresh);
      return data;
    } catch (error) {
      throw error;
    }
  }

  handleSubmitWThen(event) {
    event.preventDefault();
    axiosInstance
      .post("/token/obtain/", {
        username: this.state.username,
        password: this.state.password,
      })
      .then((result) => {
        axiosInstance.defaults.headers["Authorization"] =
          "JWT " + result.data.access;
        localStorage.setItem("access_token", result.data.access);
        localStorage.setItem("refresh_token", result.data.refresh);
      })
      .catch((error) => {
        throw error;
      });
  }

  render() {
    return (
      <div>
        Login
        <form onSubmit={this.handleSubmit}>
          <label>
            Username:
            <input
              name="username"
              type="text"
              value={this.state.username}
              onChange={this.handleChange}
            />
          </label>
          <label>
            Password:
            <input
              name="password"
              type="password"
              value={this.state.password}
              onChange={this.handleChange}
            />
          </label>
          <input type="submit" value="Submit" />
        </form>
      </div>
    );
  }
}
export default Login;

И топор ios код: 

import axios from "axios";

const axiosInstance = axios.create({
  baseURL: "http://127.0.0.1:8000/api/",
  timeout: 5000,
  headers: {
    Authorization: "JWT " + localStorage.getItem("access_token"),
    "Content-Type": "application/json",
    accept: "application/json",
  },
});

export default axiosInstance;

ошибка, когда я нажимаю кнопку отправки на странице входа в систему. 

login.js:68 Uncaught TypeError: Cannot read property 'access' of undefined
    at Login.handleSubmit (login.js:68)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
    at executeDispatch (react-dom.development.js:389)
    at executeDispatchesInOrder (react-dom.development.js:414)
    at executeDispatchesAndRelease (react-dom.development.js:3278)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287)

Я понимаю, что что-то не так с моей функцией handlesubmit, что вызов не выполняется.

печать reponse.data на консоль: 

class Login ...

  handleSubmit(event) {
    event.preventDefault();
    try {
      const response = axiosInstance.post("/token/obtain/", {
        username: this.state.username,
        password: this.state.password,
      });
    console.log(response.data)
    ...

Результатом является отклоненное обещание: console output

...