Почему axios.interceptor при перехвате запроса отправляет актуальные данные, а так-же все прошлые данные?

Question

[Andrei Antanovich]

Здравствуйте.
Есть интерцептор, который консолит каждый раз при запросе на любой адрес текущий токен с хранилища:

useMemo(()=>{
    axios.interceptors.request.use( config=>{
      console.log(props.jwtAccessToken)
      return config
    },(err)=>{
      return Promise.reject(err)
    })
  },[props.jwtAccessToken])

А так-же есть кнопка логина, при нажатии, в результате которого приходит с сервера токен и отправляется в хранилище:

const logIn =  () => {
    if (!user.email || !user.password) {
      console.log('Enter login and password')
      return
    }
    const userData = JSON.stringify(user)
     axios.request({ url: '/api/logInUser', method: 'post', data: userData, headers: { 'Content-Type': 'application/json' } })
      .then(response => {
        if (response.data.jwtAccessToken) {
          props.setJWT(response.data.jwtAccessToken)
        }
      })
  }

Проблема в том, что при нажатии на кнопку логин отправляется судя по всему новый и старые запросы все, видно из консоли.(смотрите скрин консоли, после множества нажатий).
https://disk.yandex.by/i/CBriL23gA22DYQ
Перепробовал все варианты, так происходит только при использовании интерцептора, если эту же логику оставляю без его использования, а подвесив именно на запрос по нужному адресу, то все работает корректно. Надеюсь что все понятно, спасибо.

Answer 1

[Aetae]

Каждый раз когда меняется props.jwtAccessToken или создаётся новый компонент - вызывается useMemo. Каждый раз как вызываются useMemo - добавляется ещё один interceptor.

Interceptor надо вешать, очевидно, один раз одну штуку.

Comments

[Andrei Antanovich]

Когда не использую useMemo, интерцептор вызывается очень много раз, но при этом, все равно, и актуальное и все старые консолятся при каждом нажатии. Если использую пустой массив зависимостей в useMemo, он совсем не вызывается.

[Aetae]

AndreiAntanovich, ещё раз: axios.interceptors.request.use - это не вызов интерцептора, это создание нового интерцептора. На каждый props.jwtAccessToken и на каждое создание компонента у тебя создаётся по одному интерцептору. Который висит вечно и на каждый запрос логирует тот props.jwtAccessToken, с которым был создан.

[Andrei Antanovich]

Aetae, я понял. Вообще есть возможность его как-то сбрасывать , хотя бы не логировать? Получается в таком случае сам по себе интерцептор мало где пригодный к использованию. Дело еще в том что, если использовать интерцептор без useMemo, он вызывается в моем случае 17 раз при каждом запросе, поэтому я и использую useMemo, но и без useMemo все результаты прошлых запросов сохраняются.

[Aetae]

AndreiAntanovich, интерцептор надо задавать вообще вне компонента ровно один раз. Интерцептор слушает все запросы сделанные данным инстансом axios независимо от компонента.

Токен в нём стоит получать не из каких-то непонятных локальных props.

Eсли очень хочется, можно сделать как-то так:
Вне компонента, сверху:

let jwtAccessToken;
axios.interceptors.request.use( config=>{
  console.log(jwtAccessToken)
  return config
},(err)=>{
  return Promise.reject(err)
})

В компоненте:
jwtAccessToken = props.jwtAccessToken;
Но это так себе колхоз и возможный race condition.

[Andrei Antanovich]

Aetae, попробую, спасибо. Пропс этот из стора.

[Aetae]

AndreiAntanovich, ну так и получай его напрямую из стора в интерцепторе.

const store = createStore(...);

function selectToken(state) {
  return state.some.deep.property.jwtAccessToken;
}
function getToken() {
  return selectToken(store.getState());
}

axios.interceptors.request.use( config=>{
  const jwtAccessToken = getToken();
  console.log(jwtAccessToken)
  return config
},(err)=>{
  return Promise.reject(err)
})

[Andrei Antanovich]

Aetae, все в целом ответы привели меня к решению, спасибо.