В принципе подход верный, сам пользуюсь таким, правда с показом модальников не сталкивался, у меня просто настроен редирект. Вам необходимо подключить роутер через import, так как через this тут к нему достучаться не получится.
В файле router.js
const LoginView = () => import('@/views/Login');
const router = new Router({
base: '/',
mode: 'history',
routes: [
{
path: '/login',
name: 'login',
component: LoginView,
}
],
});
export default router;
В файле с конфигом axios
import axios from 'axios';
import router from '../router';
const instance = axios.create({ baseURL });
instance.interceptors.response.use(undefined, (error) => {
if (error.response && error.response.status === 401) {
router.replace({
path: '/login',
query: { redirect: router.currentRoute.fullPath },
});
}
return Promise.reject(error.response.data);
});
P.S. Можно редирект сделать с нужными props и тогда вы сможете показать модальник, если нужный пропс выставлен.