Uncaught (в обещании) NavigationDuplicated ошибка на недействительных учетных данных

Question

В моем Laravel 5.8 / "vue": "^ 2.6.10" / "vuex": "^ 3.1.0" app В файле resources / js / components / Login.vue у меня есть метод

methods: {
    authenticate() {
        this.$store.dispatch('login');    // calling action

        login(this.$data.form)
            .then((res) => {

                this.$store.commit("setLoginSuccess", res);  // calling mutation
                this.$store.dispatch('retrieveHostelBookmarks', res.user.id);
                this.$store.dispatch('retrievePersonalOptions', res.user.id);


                this.$router.push({path: '/personal'}); // For debugging!
            })
            .catch((error) => {
                console.log("=== error::")
                console.log(error)
                this.$store.commit("setLoginFailed", {error});   // calling mutation
            });
    }

и в resources / js / helpers / authFuncs.js у меня есть определение:

export function login(credentials) {
    return new Promise((res, rej) => {
        axios.post('/api/auth/login', credentials)
            .then((response) => {
                setAuthorizationToken(response.data.access_token);
                res(response.data);
            })
            .catch((err) =>{
                console.error(err)
                rej("Wrong email or password");
            })
    })
}

, и проблема в том, что при неверных учетных данных в консоли я вижу предупреждение об обещании в конце вывода:

VM836:1 POST http://127.0.0.1:8084/api/auth/login 401 (Unauthorized)
(anonymous) @ VM836:1
dispatchXhrRequest @ app.js?dt=1571914585:311
xhrAdapter @ app.js?dt=1571914585:150
dispatchRequest @ app.js?dt=1571914585:758
Promise.then (async)
request @ app.js?dt=1571914585:560
Axios.<computed> @ app.js?dt=1571914585:585
...
app.js?dt=1571914585:10042 === error::
app.js?dt=1571914585:10043 Wrong email or password
app.js?dt=1571914585:131483 Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated", message: "Navigating to current location ("/login") is not allowed", stack: "Error↵    at new NavigationDuplicated (http://127.…/127.0.0.1:8084/js/app.js?dt=1571914585:148080:12"}

Почему это предупреждение и как его исправить?

Answer 1

MODIFIED # 2: Я обнаружил, ГДЕ сработала ошибка! В моих ресурсах / js / app.js у меня есть:

const router = new VueRouter({
    routes,
    mode: 'history'
});

checkAuthorization(store, router);
axios.interceptors.response.use(null, (error) => {

    if (error.response.status == 401) {

        store.commit('setLogout');

        console.log("0012 route.path::")
        console.log( $route )      // THAT OUTPUTS NOTHING
        console.log( $route.path ) // THAT OUTPUTS NOTHING

        router.push('/login');  // THAT RISE ERROR !
    }

    return Promise.reject(error);
});


const app = new Vue({
    el: '#app',
    router,
    store,
    bus,
    components: {
        mainapp, appheader, appfooter, navigation
    },
});


router.afterEach(( to, from ) => {
    bus.$emit('page_changed', from, to);
});

и строка

router.push('/login');

вызвать эту ошибку, но я не знаю, как я могу проверить текущий путь

I предоставленная ссылка, которую я прочитал:

Примечание: $ route - это объект, предоставленный vue-router для каждого компонента

Но $ route пуст,Я думаю, что мне нужно получить $ route.path внутри

axios.interceptors.response.use

Как?