Как авторизовать частный маршрут с Axios - PullRequest
Новая
       4

Как авторизовать частный маршрут с Axios

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

Я пробую аутентификацию на стороне сервера с помощью API, который я построил. Все мои маршруты были проверены и, похоже, отлично работают на почтальоне. Я использую Ax ios на внешнем интерфейсе, и все маршруты publi c работают отлично. Вход в систему с использованием Ax ios тоже работает нормально. Это частные маршруты, которые являются проблемой. Я привык к API Google для аутентификации переднего плана, поэтому я не могу понять, как авторизовать частные маршруты.

ax ios. js

axios.defaults.headers.common['Authorization'] = token;
axios.defaults.headers.post['Content-Type'] = 'application/json';

const login = () => {
  Axios({
    url: '/auth/login',
    baseURL: 'http://<ip address>/api/v1',
    method: 'post',
    data: {
      email: '<email>',
      password: '<password>'
    }
  }).then(res => sessionStorage.setItem('auth', res.data.token))
    .catch(err => console.log(err))
}

Так что приведенный выше код работает нормально, но я могу пойти в неправильном направлении, сохранив токен в хранение сессии в браузере. Код ниже - это личный маршрут статьи. где я получаю следующее сообщение: Failed to load resource: the server responded with a status of 401 (Unauthorized).

ax ios. js

const postArticle = () => {
  Axios({
    url: '/articles',
    baseURL: 'http://<ip address>/api/v1',
    method: 'post',
    data: {
      "title": "New Title",
      "subtitle": "Optional Subtitle",
      "description": "Small Intro to Social Media Integration",
      "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec et odio pellentesque diam volutpat commodo. Odio aenean sed adipiscing diam. Lacus viverra vitae congue eu consequat. Porttitor rhoncus dolor purus non enim praesent elementum. Aliquam purus...",
      "tag": [
        "Mobile Development",
        "Diary"
      ]
    }
  }).then(res => console.log(res.data))
    .catch(err => console.log(err))
}

Когда я console.log токен, он выходит верно, но я не уверен, как мне нужно изменить postArticle, чтобы взять в заголовках по умолчанию.

1 Ответ

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

Разобрался. Вход выполнен правильно. Просто нужно привести значение по умолчанию в заголовки для postArticle. 

const postArticle = () => {
  Axios({
    headers: {
      'Authorization': Axios.defaults.headers.common['Authorization'],
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    url: '/articles',
    baseURL: 'http://67.207.83.201/api/v1',
    method: 'post',
    data: {
      "title": "Another New Title",
      "subtitle": "Optional Subtitle",
      "description": "Small Intro for Play Play Play",
      "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec et odio pellentesque diam volutpat commodo. Odio aenean sed adipiscing diam. Lacus viverra vitae congue eu consequat. Porttitor rhoncus dolor purus non enim praesent elementum. Aliquam purus sit amet luctus venenatis. Mauris ultrices eros in cursus turpis. Accumsan tortor posuere ac ut consequat semper. Vestibulum lorem sed risus ultricies tristique nulla aliquet enim tortor. Facilisi nullam vehicula ipsum a arcu. Non tellus orci ac auctor augue mauris. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc. Ac ut consequat semper viverra nam libero justo. Ut aliquam purus sit amet luctus. Fermentum dui faucibus in ornare quam viverra orci sagittis eu. Tortor consequat id porta nibh.",
      "tag": [
        "Mobile Development",
        "Diary"
      ]
    }
  }).then(res => console.log(res.data))
    .catch(err => console.log(err))
}
...