A
A
Andrei Antanovich2021-11-17 23:47:38
JavaScript
Andrei Antanovich, 2021-11-17 23:47:38

Why does axios.interceptor send the current data, as well as all past data, when intercepting a request?

Hello.
There is an interceptor that consoles the current token from the storage every time a request is made to any address:

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

And there is also a login button, when pressed, as a result of which a token comes from the server and is sent to the storage:
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)
        }
      })
  }

The problem is that when you click on the button, the login is sent, apparently, new and old requests are all visible from the console. (See the console screen, after a lot of clicks).
https://disk.yandex.by/i/CBriL23gA22DYQ
I tried all the options, this happens only when using the interceptor, if I leave the same logic without using it, and hang it on the request at the right address, then everything works correctly. I hope everything is clear, thanks.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Aetae, 2021-11-18
@AndreiAntanovich

Every time props.jwtAccessTokena new component is changed or created, useMemo. Every time they are called , another oneuseMemo is added . it is necessary to hang, obviously, once one thing. interceptor
Interceptor

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question