How to receive re-requested data when data requested by mounted() is re-requested by aixos interceptor

Question

the code below is the first request for get list data

mounted() {
        this.getList()
    },
    methods: {
        handleClick(row) {
            console.log(row.id)
            console.log(row.url)
            this.$router.push({ name: 'Main', query: { id: row.id } })
        },
        getList() {
            axios
                .get('/api/v1/requests/all', {
                    params: {
                        userId: this.$store.state.userInfo.id,
                    },
                })
                .then(response => {
                    let moment = require('moment')
                    for (var item of response.data.data) {
                        item.createdAt = moment(item.createdAt).format(
                            'YYYY-MM-DD HH:mm:ss',
                        )
                    }
                    this.items = response.data.data
                })
                .catch(error => {
                    console.log(error)
                })
        }

my interceptor

axios.interceptors.response.use(
    function (response) {
        return response
    },
    async function (error) {
        const originalRequest = error.config
        if (error.response.status === 401 && !originalRequest._retry) {
            error.response.config._retry = true
            sessionStorage.removeItem('access-token')
            let headers = {
                grant_type: 'refresh_token',
                Authorization: sessionStorage.getItem('refresh-token'),
            }
            axios
                .post('/api/v1/users/refresh_token', {}, { headers: headers })
                .then(response => {
                    let token = response.data.data
                    sessionStorage.setItem('access-token', token)
                    originalRequest.headers['Authorization'] = token
                    originalRequest.headers['grant_type'] = 'grant_type'
                    return axios.request(originalRequest)
                })
                .catch(error => {
                    console.log(error)
                    alert('blablabla.')
                })
        }
        return Promise.reject(error)
    },
)

the flow is i understand 1.token expired 2.move to list page 3.mounted hook is request data 4.getList -> axios get('~~request/all') 5.interceptor->axios post('~~~refresh_token') 6.re request with new token(request/all) 7.re request is 200, but not update list page

i'd really appreciate your help :)

Answer 1

Seems like you need to return the second request (await for result and return). Right now the result of second request seems to be ignored

axios.interceptors.response.use(
  function (response) {
    return response;
  },
  async function (error) {
    const originalRequest = error.config;
    if (error.response.status === 401 && !originalRequest._retry) {
      error.response.config._retry = true;
      sessionStorage.removeItem("access-token");
      let headers = {
        grant_type: "refresh_token",
        Authorization: sessionStorage.getItem("refresh-token"),
      };
      const [secondError, res] = await axios // await here
        .post("/api/v1/users/refresh_token", {}, { headers: headers })
        .then(async (response) => {
          let token = response.data.data;
          sessionStorage.setItem("access-token", token);
          originalRequest.headers["Authorization"] = token;
          originalRequest.headers["grant_type"] = "grant_type";
          return [null, await axios.request(originalRequest)];
        })
        .catch((err) => {
          console.log(err);
          alert("blablabla.");
          return [err, null];
        });
        // Handle here
        if(secondError) {
          return Promise.reject(secondError);
        }
        return Promise.resolve(res)
    }
    return Promise.reject(error);
  }
);

Answer 2

The above solution worked for me perfectly. here's the modified code that I used for my requirement.

export default function axiosInterceptor() {


    //Add a response interceptor
    axios.interceptors.response.use(
        (res) => {
            // Add configurations here
            return res;
        },
        async function (error) {
            const originalRequest = error.config;
            let secondError, res
            if (error.response.status === 401 && !originalRequest._retry) {
                originalRequest._retry = true;

                [secondError, res] = await axios({
                    method: "POST",
                    url: `${baseURL}/account/token/refreshtoken`,
                    withCredentials: true,
                    headers: { "Content-Type": "application/json" },
                })
                    .then(async (response) => {
                        //handle success
                        return [null, await axios.request(originalRequest)];
                    }).catch(function (error) {
                        console.error(error)
                    });
            }
            if (secondError) {
                return Promise.reject(secondError);
            }
            return Promise.resolve(res)
        }
    );
}