Router beforeEach 守卫在 Vue created() 中加载状态之前执行

Posted

技术标签:

【中文标题】Router beforeEach 守卫在 Vue created() 中加载状态之前执行【英文标题】:Router beforeEach guard executed before state loaded in Vue created() 【发布时间】:2017-12-30 14:17:03 【问题描述】:

如果我直接导航到管理员保护的路由http://127.0.0.1:8000/dashboard/,导航总是被拒绝,因为在检查路由器保护时状态尚未加载。

beforeEach 在 Vue created 之前执行,因此无法识别当前登录的用户。

我该如何解决这个先有鸡还是先有蛋的问题?

以下文件因相关性而被截断

main.js

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.js

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",
            ,
        ,
    ],
)

【问题讨论】:

【参考方案1】:

this.$store.dispatch("auth/load")从Vue创建中取出,并在创建Vue之前运行它。

store.dispatch("auth/load")

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

new Vue(...)

如果auth/load 是异步的,则从它返回一个promise,并让你的代码在回调中初始化你的Vue。

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

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

  new Vue(...)

)

【讨论】:

做到了!谢谢伯特! @JeffS 这将如何工作?这不会导致 OP 试图解决的问题吗?

以上是关于Router beforeEach 守卫在 Vue created() 中加载状态之前执行的主要内容,如果未能解决你的问题,请参考以下文章

vue-router 导航守卫

vue导航守卫

vue-router导航守卫

vue-router进阶-1-导航守卫

路由vue-router进阶

导航守卫