라우터 전 Vue created()에 로드되기 전에 실행된 각 가드

라우터 전 Vue created()에 로드되기 전에 실행된 각 가드

만약 내가 직접 경비가 삼엄한 경로로 간다면http://127.0.0.1:8000/dashboard/라우터 가드 체크 시 스테이트가 아직 로드되지 않았기 때문에 네비게이션은 항상 거부됩니다.

beforeEachVue보다 먼저 실행 중입니다.created따라서 현재 로그인한 사용자가 인식되지 않습니다.

이 치킨 앤 에그 문제를 어떻게 해결할 수 있을까요?

관련성을 위해 아래 파일이 잘렸습니다.

main.discloss.main.discloss.

router.beforeEach((to, from, next) => {
    //
    // This is executed before the Vue created() method, and thus store getter always fails initially for admin guarded routes
    //

    // The following getter checks if the state's current role is allowed
    const allowed = store.getters[`acl/${to.meta.guard}`]

    if (!allowed) {
        return next(to.meta.fail)
    }

    next()
})

const app = new Vue({
    router,
    store,

    el: "#app",

    created() {
        // state loaded from localStorage if available
        this.$store.dispatch("auth/load")
    },

    render: h => h(App)
})

router.displaces

export default new VueRouter({
    mode: 'history',

    routes: [
        {
            path: '/',
            name: 'home',
            component: () => import('../components/Home.vue'),
            meta: {
                guard: "isAny",
            },
        },

        {
            path: '/dashboard/',
            name: 'dashboard',
            component: () => import('../components/Dashboard.vue'),
            meta: {
                guard: "isAdmin",
            },
        },
    ],
})

가지고 가다this.$store.dispatch("auth/load")Vue를 생성하기 전에 Vue를 실행합니다.

store.dispatch("auth/load")

router.beforeEach((to, from, next) => {...}

new Vue({...})

한다면auth/load는 비동기입니다.그 후 약속을 반환하고 콜백에서 Vue를 초기화합니다.

store.dispatch("auth/load").then(() => {

  router.beforeEach((to, from, next) => {...}

  new Vue({...})

})

언급URL : https://stackoverflow.com/questions/45290003/router-beforeeach-guard-executed-before-state-loaded-in-vue-created