axios, авторизируйтесь через api, обрабатывайте токен - PullRequest
Новая
       17

axios, авторизируйтесь через api, обрабатывайте токен

2 голосов
/ 15 марта 2019

Я новичок в реакции, пытаюсь устроиться на работу. Выполняю тестовое задание, где мне нужно сделать логин и зарегистрироваться с помощью 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"

1 Ответ

0 голосов
/ 15 марта 2019

Вы можете установить постоянный заголовок в глобальном экземпляре axios следующим образом: 

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

Вы можете изменить Authorization на любой нужный заголовок.Каждый запрос будет содержать этот токен.

Если в одном из ваших ответов Axios вы получаете статус 401;Вы можете попробовать обновить access_token и установить его снова в глобальном экземпляре axios.Вы даже можете перенаправить своего пользователя на страницу входа в систему.

Для просмотра части входа в систему: как только вы получите свой токен, вы должны изменить свой контейнер / экран (я так полагаю).Если вы используете react-router (или другой маршрутизатор), вы должны push к новому маршруту.Если вы используете redux, вы можете сохранить логическое значение authenticated в одном из ваших редукторов и выполнить с ним условный рендеринг: заблокировать доступ к некоторому маршруту / компоненту.

...