Function called to refresh authorization not run

[tadapp]

Hello!

My project for vue js. I followed the example and created a file main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify';
import axios from 'axios';
import createAuthRefreshInterceptor from 'axios-auth-refresh';

Vue.config.productionTip = false;
Vue.prototype.$http = axios;
Vue.prototype.$serverApiLink = 'http://a.xsph.ru/api/';

function getAccessToken(){
    return store.state.authTokens.access
}

// Function that will be called to refresh authorization
const refreshAuthLogic = failedRequest =>
    axios.post(this.$serverApiLink+'/api/auth/token/new_access', {headers: {Authorization: store.state.authTokens.refresh}}).then(tokenRefreshResponse => {
    window.console.log('HELP');
    store.commit('userAuthTokens', tokenRefreshResponse.data.tokens);
    failedRequest.response.config.headers['Authorization'] = tokenRefreshResponse.data.tokens.access;
    return Promise.resolve();
});

// Instantiate the interceptor (you can chain it as it returns the axios instance)
createAuthRefreshInterceptor(axios, refreshAuthLogic);
axios.interceptors.request.use(request => {
    request.headers['Authorization'] = getAccessToken();
    return request;
});

when i get error 401 Nothing happens. refreshAuthLogic not work!
What am I doing wrong and how can I fix it? Thank you!

[Flyrell]

Would you please provide a small replication for this? At first glance it looks good, so it's hard to tell where the problem lies. Which version of the plugin are you using? It might also be helpful to see the call which causes 401.

[tadapp]

Thank you for a quick response!

I'm just a fool - I used the wrong syntax for my variables)
This works great!
Just in case, I will publish the correct code - perhaps this will be an example of a quick start for others.

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify';
import axios from 'axios';
import createAuthRefreshInterceptor from 'axios-auth-refresh';

Vue.config.productionTip = false;
Vue.prototype.$http = axios;
Vue.prototype.$serverApiLink = 'http://xsph.ru/api/';

function getAccessToken(){
    return store.state.authTokens.access
}


// Function that will be called to refresh authorization
const refreshAuthLogic = failedRequest =>
    axios.get(Vue.prototype.$serverApiLink+'auth/token/new_access', {headers: {Refresh: store.state.authTokens.refresh}}).then(tokenRefreshResponse => {
    window.console.log(store.state.authTokens.refresh);
    store.commit('userAuthTokens', tokenRefreshResponse.data.tokens);
    failedRequest.response.config.headers['Authorization'] = tokenRefreshResponse.data.tokens.access;
    return Promise.resolve();
}).catch(error => (
        window.console.log(error.response)
    ));
// Instantiate the interceptor (you can chain it as it returns the axios instance)
createAuthRefreshInterceptor(axios, refreshAuthLogic);
axios.interceptors.request.use(request => {
    request.headers['Authorization'] = getAccessToken();
    return request;
});

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app');

[Flyrell]

Ok. I will close the issue then. Please, consider using StackOverflow for the future implementation help. Thank you.