Vue: Vuex getter에서 Per-Route Guard를 사용하는 방법

Vue: Vuex getter에서 Per-Route Guard를 사용하는 방법

델이 취급하는 방법과 비슷합니다.isAuthenticate사용자 인증이 제대로 되었는지 확인하는 기능이 있어서 매장에서 확인하려고 합니다.

const state = {
    cliente: []
};

const getters = {
    //Verificar Regra
    CHECK_CLIENTE_STATE: (state) => {
        return state.cliente
    }
}

const actions = {
    FETCH_DADOS({ commit }, obj) {
        return fetch(`http://localhost:3030/pessoas/informacao/${obj['data']}`)
            .then(response => response.json())
            .then(data => commit('SetCliente', data))
            .catch(error => console.log(`Fetch: ${error}`))
    }
}

const mutations = {
    SetCliente(state, cliente) {
        state.cliente = cliente
    }
}

로그인 페이지,

  methods:{
    fetch(){
      this.$store.dispatch("FETCH_DADOS",{'data':'12345'})
      this.$router.push('/') 
    }
  }

첫 번째 페치클릭으로 Vuex를 검사했는데, 확실히 동작하고 있는 것 같습니다.

루트:

const routes = [{
        path: '/',
        beforeEnter: (to, from, next) => {
            if (store.getters.CHECK_CLIENTE_STATE == '') {
                next('/login')
            }
            next();
        },
        component: () =>
            import ('../views/Home')
    },
    {
        path: '/login',
        component: () =>
            import ('../views/Login')
    }
]

음, 인console.log첫 번째 fetch click에서 이 에러가 발생하지만 위와 같이 vuex에서는 스토어가 꽉 차 있습니다.

Uncaught (in promise) 오류: 네비게이션 가드를 통해 "/login"에서 "/"로 이동할 때 방향 수정됩니다.

왜 두 번째 클릭만으로 리다이렉트 되는 거죠?home처음은 아니고?

업데이트 중

router.js에서의 새로운 접근법 시행

path: '/',
beforeEnter: (to, from, next) => {
    console.log(!store.getters.CHECK_CLIENTE_STATE.length)
    if (!store.getters.CHECK_CLIENTE_STATE.length) {
        next('/login')
    }
    next();
},
component: () =>
    import ('../views/Home')

하지만 다시 말씀드리지만, 첫 번째 도입은TRUE그리고 두 번째FALSE, /home 으로 리다이렉트 됩니다.

데이터가 로드되기 전에 라우터가 지시되고 있습니다.기다려 주세요.

methods:{
  async fetch(){
    await this.$store.dispatch("FETCH_DADOS",{'data':'12345'})
    this.$router.push('/') 
  }
}

언급URL : https://stackoverflow.com/questions/65298252/vue-how-to-use-per-route-guard-with-vuex-getter