Got Uncaught (in promise) NavigationDuplicated error on invalid credentials

Question

In my Laravel 5.8 / "vue": "^2.6.10"/ "vuex": "^3.1.0" app In resources/js/components/Login.vue file I have method

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
            });
    }

and in resources/js/helpers/authFuncs.js I have definition :

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");
            })
    })
}

and the problem is that on invalid credentials in the console I see promise warning in the end of output :

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"}

Why this warning and how to fix it?

Answer 1

We can use this.$router.push(route, () => {}); to get rid of the error.

Answer 2

I just had this problem in a Vue JS SPA app due to it requesting GET /api/user immediately after a page load that would cause an error 401 expired JWT token.

I can't see which order those occured, but I can see the middleware ran first, and then the axios.interceptors.response.use(response => response, (error) => {}) ran second.

Both were calling this.$route.push({ name: 'login' }). While the interceptor was running, the route-change was already in progress.

My solution was to retain the middleware's this.$route.push({ name: 'login' }), and then I changed the interceptor to:

import router from '~/router';

...

if (router.currentRoute.name !== 'login') {
    router.push({ name: 'login' }).catch(() => {});
}

I chose to match it based on the route name so that I wasn't hard-coding /login. It effectively skips the would-be duplicate route-change if the login route is already loading when the interceptor checks what it should do as a result of the expired token.