검색되지 않은(약속되지 않은) 탐색 잘못된 자격 증명에서 중복된 오류 발생

검색되지 않은(약속되지 않은) 탐색 잘못된 자격 증명에서 중복된 오류 발생

내 Larabel 5.8 / "vue" : "^2.6.10" / "vuex" : "^3.1.0" 앱 리소스/js/컴포넌트/로그인.vue file 메서드가 있습니다.

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

문제는 콘솔의 비활성 credential에서 출력 끝에 약속 경고가 나타난다는 것입니다.

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

이 경고의 이유와 해결 방법

사용할 수 있습니다.this.$router.push(route, () => {});에러를 없애기 위해서입니다.

Vue JS SPA 앱에서 이 문제가 발생했습니다.GET /api/user401 유효기간이 지난 JWT 토큰의 원인이 되는 페이지 로드 직후.

어떤 순서가 발생했는지 알 수 없지만 미들웨어가 먼저 실행되어 그 다음에axios.interceptors.response.use(response => response, (error) => {})두 번째로 달렸어요.

둘 다 전화하고 있었다.this.$route.push({ name: 'login' })대행 수신기가 실행 중일 때 루트 변경이 이미 진행 중입니다.

제 해결책은 미들웨어를 유지하는 것이었습니다.this.$route.push({ name: 'login' })가로채기를 다음으로 변경했습니다.

import router from '~/router';

...

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

하드코딩을 하지 않기 위해 루트명을 기반으로 매칭을 선택했습니다./login대행 수신기가 만료된 토큰의 결과로 수행해야 할 작업을 체크할 때 로그인 루트가 이미 로드되어 있는 경우 중복되는 루트 변경을 실질적으로 건너뜁니다.

당신은 가질 수 없습니다.router-link현재 링크를 가리키고 있습니다.이 Github 문제 참조

당신이 확인하기를 제안합니다.router-link리다이렉트 전에 현재 링크를 포인트 합니다.아래 코드를 참조해 주세요.

if (this.$router.path !== '/login') {
    this.$router.push('/login')
}

라우터 패스가 다른 경우 리다이렉트해야 합니다./login제 답변이 도움이 됐으면 좋겠어요.

가장 쉬운 해결책

this.$router.push('/something').catch(err => { return err })

수정 # 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');

이 에러를 발생시킵니다만, 현재의 패스를 확인하는 방법을 모르겠습니다.

표시된 링크에서 읽은 내용은 다음과 같습니다.

주의: $route는 vue-router에 의해 모든 컴포넌트에 제공되는 객체입니다.

그러나 $route는 비어 있습니다.$route를 받아야 할 것 같아요.내부 경로

axios.interceptors.response.use

어떻게?

수정 # 3 : try block으로 랩을 시도했습니다.

try {
    router.push('/login');
}
catch(error) {
    console.log("0014 route.path::")
}

어쨌든 에러가 났는데...어떤 결정이라도 있나요?

error.response가 현재 페이지를 참조했기 때문에 결정은 간단했던 것 같습니다.

if ( error.response.config.url != '/api/auth/login' ) {
    router.push('/login');
}

그게 나한테는 효과가 있어...

언급URL : https://stackoverflow.com/questions/58540009/got-uncaught-in-promise-navigationduplicated-error-on-invalid-credentials