Using router.push in file axios (in files vue I can use)

[EwertonDutra]

import axios from "axios"
import { getCookie } from "../helpers/cookie"

const api = axios.create({ baseURL: 'URL' })
api.defaults.headers.common['Accept'] = 'application/json';
api.defaults.headers.common['Content-Type'] = 'application/json';
api.defaults.headers.common['Authorization'] = `Bearer ${getCookie('TOKEN')}`;

api.interceptors.request.use(function (config) {
    return config;
}, function (error) {
    return Promise.reject(error);
});

api.interceptors.response.use(function (response) {
    return response;
}, function (error) {
    if (error.response.status === 401) {
        // send to LOGIN

        console.log('HERE');
    }
    return Promise.reject(error);
});

export { api }

I've tried everything to use the saw router

Or when I import the .push doesn't exist or I can't import (of course, I'm doing it wrong)

It should be something like this:
import router from '../router/index';

Later:

router.push({
    name: 'login'
})

But not working 😓

In vue files, I do it like this and it works:

import { useRouter } from "vue-router";
... 
const router = useRouter();
... 
router.push({ path: "/login" });

[MilosPaunovic]

What you need is boot file:
https://quasar.dev/quasar-cli/boot-files#axios

import { boot } from 'quasar/wrappers'
import axios from 'axios'

const api = axios.create({ baseURL: 'https://api.example.com' })

export default boot(({ app, router }) => {
  // for use inside Vue files (Options API) through this.$axios and this.$api

  app.config.globalProperties.$axios = axios
  // ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
  //       so you won't necessarily have to import axios in each vue file

  app.config.globalProperties.$api = api
  // ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
  //       so you can easily perform requests against your app's API
})

export { axios, api }

[EwertonDutra]

My file axios It's already like this

axios.js

import { boot } from 'quasar/wrappers'
import axios from 'axios'

// Be careful when using SSR for cross-request state pollution
// due to creating a Singleton instance here;
// If any client changes this (global) instance, it might be a
// good idea to move this instance creation inside of the
// "export default () => {}" function below (which runs individually
// for each client)
const api = axios.create({ baseURL: 'URL' })
api.defaults.headers.common['Accept'] = 'application/json';
api.defaults.headers.common['Content-Type'] = 'application/json';

export default boot(({ app }) => {
  // for use inside Vue files (Options API) through this.$axios and this.$api

  app.config.globalProperties.$axios = axios
  // ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
  //       so you won't necessarily have to import axios in each vue file

  app.config.globalProperties.$api = api
  // ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
  //       so you can easily perform requests against your app's API
})

export { api }

[EwertonDutra]

Leaving the router as a parameter, I didn't understand how to use 😅

[EwertonDutra]

@MilosPaunovic
Now, I think I got the hang of it.

For those who are going to use the axios interceptor, here is a tip:

import { boot } from 'quasar/wrappers'
import axios from "axios"
import { getCookie } from "../helpers/cookie"

const api = axios.create({ baseURL: 'URL' })
api.defaults.headers.common['Accept'] = 'application/json';
api.defaults.headers.common['Content-Type'] = 'application/json';
api.defaults.headers.common['Authorization'] = `Bearer ${getCookie('tkadm_pedds')}`;

export default boot(({ app, router }) => {
    api.interceptors.request.use(function (config) {
        return config;
    }, function (error) {
        return Promise.reject(error);
    });
    
    api.interceptors.response.use(function (response) {
        return response;
    }, function (error) {
        if (error.response.status === 401) {
            router.push({
                path: '/login'
            })
        }
        return Promise.reject(error);
    });
})

export { api }

Ahh in quasar.conf.js have edit

boot: [
  'client'
],

I use one instance (from axios) for those who are logged in (with token) and one for those who are not (for login)

[dkwktm45]

This really helped me a lot.👍👍