Ax ios: использование baseUrl в отдельном файле вызывает проблемы с настройкой токена аутентификации в заголовках запросов ax ios - PullRequest
Новая
       17

Ax ios: использование baseUrl в отдельном файле вызывает проблемы с настройкой токена аутентификации в заголовках запросов ax ios

0 голосов
/ 28 февраля 2020

Я писал URL-адрес API внутри запроса следующим образом: 

export const getAllAdmins2 = () => dispatch => {
  axios
    .get("http://baseUrl:3083/api/admin/getAllAdmins")
    .then(retrievedAdmins => {
      console.log("getAllAdmins2");
      console.log(retrievedAdmins);
      // this.setState({
      //   usersInformation: retrievedAdmins.data
      // });
    })
    .catch(error => console.log(error));
};

Но это можно улучшить, задав URL-адрес в отдельном файле:

conf /api.js

import axios from "axios";

export default axios.create({
  baseURL: `http://baseUrl:3083`
});

И поэтому я изменил запрос API на следующее: 

import API from "../conf/api";

export const getAllAdmins = () => dispatch => {
  API.get("api/admin/getAllAdmins")
    .then(retrievedAdmins => {
      console.log("retrievedAdmins insideAPI.get(api/admin/getAllAdmin)");
      console.log(retrievedAdmins);
      // this.setState({
      //   usersInformation: retrievedAdmins.data
      // });
    })
    .catch(error => console.log(error));
};

Но это вызвало странную проблему: Код который отвечал за автоматическую установку токена аутентификации в каждом запросе, больше не выполняет свою работу. В бэкэнде токен не определен: 

 2020-02-28T17:49:41+0100 <notice> TokenServices.js:76 Object.HasValidToken Access Token:undefined

Это код, который отвечает за установку аутентификационный заголовок :

Приложение. js

if (localStorage.jwtToken) {
  // Set auth token header auth
  setAuthToken(localStorage.jwtToken);

  // Decode token and get user info and expiration
  const decoded = jwt_decode(localStorage.jwtToken);
  // Set User and is Authenticated
  store.dispatch(setCurrentUser(decoded));
  // Now if you reload a page, if the user has already logged-in you will still have his info in he state

  // Check for expired token
  const currentTime = Date.now() / 1000;
  if (decoded.exp < currentTime) {
    // Logout User
    store.dispatch(logoutUser());
    // Redirect to login
    window.location.href = "/login";
  }
}

utils / setAuthToken. js

// What we will do here will prevent us from manually making sure of having the token inside each relevant request
// If we're logged-in, we can call this function and it will always attach that authorization header
// TODO: Need to make sure that the token is stored inside x-access-token
import axios from "axios";

const setAuthToken = token => {
  console.log("setAuthToken is called");
  if (token) {
    // Apply to every request
    axios.defaults.headers.common = {
      // Authorization: token,
      //TODO: Not sure about this
      "x-access-token": token
    };
    console.log("token is: ");
    console.log(token);
    console.log("axios.defaults.headers.common: ");
    console.log(axios.defaults.headers.common);
  } else {
    // Delete the Auth header
    axios.defaults.headers.common = {
      //Authorization: token,
      "x-access-token": token
    };
  }
};
export default setAuthToken;

И это результат регистрации setAuthToken: 

setAuthToken.js:7 setAuthToken is called
setAuthToken.js:15 token is: 
setAuthToken.js:16 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwibm9tIjoiYXZlbXBhY2UiLCJlbWFpbCI6ImF2ZW1wYWNlQGF2ZW1wYWNlLmNvbSIsIm1vdF9kZV9wYXNzZSI6IlUyRnNkR1ZrWDEvRGdCN3JUUjB1YTJvc1BIcm1hRkswN3pjTGd5aSsxcE09IiwibGFzdF9sb2dpbiI6bnVsbCwicm9sZSI6InN1cGVyX3VzZXIiLCJjcmVhdGVkQXQiOiIyMDIwLTAyLTI4VDA5OjQwOjE4LjM3MFoiLCJ1cGRhdGVkQXQiOiIyMDIwLTAyLTI4VDA5OjQwOjE4LjM3MFoiLCJpYXQiOjE1ODI5MDg0NjAsImV4cCI6MTU4MjkxMjA2MH0.8Btk4f0Bdw-pM2qGEbk0s5V-u3jBugIHYDKH8aoDzW8
setAuthToken.js:17 axios.defaults.headers.common: 
setAuthToken.js:18 {x-access-token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwib…A2MH0.8Btk4f0Bdw-pM2qGEbk0s5V-u3jBugIHYDKH8aoDzW8"}

Кажется, он работает. Однако, как я уже сказал, в бэкэнде, когда я использую getAllAdmins , который использует новую реализацию ax ios url , маркер равен undefined в бэкэнде. Но когда я использую getAllAdmins2 , который использует прямую реализацию ax ios url , код хорошо принимается в бэкэнде, и все работает нормально.

1 Ответ

1 голос
/ 28 февраля 2020

Ваша проблема, вероятно, связана с тем, что экземпляр ax ios в conf/api.js создан до того, как вы установите токен в axios.defaults, поэтому ваш экземпляр не будет затронут. Т.е. ваш заказ:

  • Создание экземпляра ax ios без токена (сделано на include / comiple api. js)
  • Загрузка токена и установка значений по умолчанию

Поскольку у вас по существу есть экземпляр с одним топором ios, вы можете вместо этого установить его значения по умолчанию вместо глобальных значений по умолчанию при загрузке токена, т. Е.

До: 

// This is setting the defaults used when creating instance and the global axios is used
axios.defaults.headers.common = {
...

После: 

import API from "../conf/api";

...
// This will set the the defaults of your singleton instance
API.defaults.headers.common = {
...

Вышеуказанное должно решить вашу проблему с вашей текущей настройкой, но альтернативный вариант - go вернуться к использованию глобальной axios (например, axios.get ) и вместо этого установите базовый URL по умолчанию, то есть: 

// During app init:
axios.defaults.baseURL = 'http://your.base.url';
...