Различные заголовки, используемые в патче Axios

Я час смотрел в консоли Chrome и не могу понять, откуда взялась эта ошибка.

Я заканчиваю обновление реализации OAuth в моем приложении Vue.

История начинается, когда _1 _ выясняет, что необходимо создать нового пользователя. Компонент Vue Vue-аутентификация зависит от наличия access_token в ответе, поэтому я возвращаю фиктивный текст:

return api.sendResponse(res, { email, name, socialId, access_token: 'abcd' });

Библиотека хранит это значение в localStorage:

снимок экрана localStorage

После перенаправления _5 _ отображается, и я заполняю форму. Первое взаимодействие с сервером - это вызов Vuex для создания нового пользователя:

response = await this.$store.dispatch('CREATE_USER_PROFILE', payload);

Что возвращает настоящий короткоживущий токен JWT:

const token = auth.createToken(userId, nickname, new Date(), null, false, '1m');
return api.sendCreated(res, api.createResponse(token));

Что я потом сохраняю на странице Vue:

const { data } = response;
const token = data.data;
if (token === undefined) {
  this.error = this.$t('sign-up.something-went-wrong');
  return false;
}

Я проверил, что токен содержит то, что вернул сервер:

Request URL: https://beta.mezinamiridici.cz/api/v1/users
Request Method: POST
Status Code: 201 Created

{"success":true,"data":"eyJhbGciOiJIUzI1NiIs...Tl8JFw2HZ3VMXJk"}

Затем я вызываю другой метод Vuex и передаю текущий токен JWT:

await this.$store.dispatch('UPDATE_USER_PROFILE', {

Я проверил в инструментах разработчика Vuex, что действительно существует правильный токен JWT. Затем я передаю его _11 _.

Здесь я создаю конфигурацию Axios с заголовком Authorization:

function getAuthHeader(context, jwt = undefined, upload) {
  const config = { headers: { } };
  if (jwt || (context && context.rootState.users.userToken)) {
    config.headers.Authorization = `bearer ${jwt || context.rootState.users.userToken}`;
  }

Я снова проверил, что там используется правильный токен JWT.

Наконец, я передаю все данные в Axios:

function patch(endpoint, url, body, context, jwt) {
  const headers = getAuthHeader(context, jwt);
  console.log(headers);
  if (endpoint === 'BFF') {
    return axios.patch(`${VUE_APP_BFF_ENDPOINT}${url}`, body, headers);
  } else {
    return axios.patch(`${VUE_APP_API_ENDPOINT}${url}`, body, headers);
  }
}

Который я регистрирую и могу подтвердить, что правильный JWT все еще существует:

bearer eyJhbGciOiJIUzI1N....8JFw2HZ3VMXJk

Нет ничего, что могло бы изменить заголовок сейчас на abcd, но вкладка «Сеть» показывает это:

Снимок экрана вкладки

И сервер выходит из строя с ошибкой синтаксического анализа.

Кто-нибудь знает, почему Axios использует заголовок Authorization с другим значением, чем я его передаю?


javascript vue.js axios
person Leos Literak    schedule 22.12.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Хорошо, тайна раскрыта. vue-authenticate - причина, потому что он создает перехватчики Axios и обрабатывает сам Authorization заголовок.

vue-authenticate.common.js:

var defaultOptions = {
  bindRequestInterceptor: function ($auth) {
    var tokenHeader = $auth.options.tokenHeader;

    $auth.$http.interceptors.request.use(function (config) {
      if ($auth.isAuthenticated()) {
        config.headers[tokenHeader] = [
          $auth.options.tokenType, $auth.getToken()
        ].join(' ');
      } else {
        delete config.headers[tokenHeader];
      }
      return config
    });
  },

Мой код более сложный и поддерживает внутренние учетные записи с адресом электронной почты / паролем, поэтому этот код ломает мой. Перехватчик должен присутствовать и быть функцией, поэтому решение было:

Vue.use(VueAuthenticate, {
  tokenName: 'jwt',
  baseUrl: process.env.VUE_APP_API_ENDPOINT,
  storageType: 'localStorage',
  bindRequestInterceptor() {},
  bindResponseInterceptor() {},
  providers: {
    facebook: {
      clientId: process.env.VUE_APP_FACEBOOK_CLIENT_ID,
      redirectUri: process.env.VUE_APP_FACEBOOK_REDIRECT_URI,
    },
person Leos Literak    schedule 24.12.2020