如何在我的 vuejs 组件的 router.beforeEach 中注入数据？

Question

我使用 router.beforeEach 来保护一些视图。我在进入我的 vue 之前获取我的用户。我想在所有经过身份验证的页面中使用此用户。如何在我的 vuejs 组件的 router.beforeEach 中注入数据？

这是我的路线定义：

import Vue from 'vue';
import VueRouter from 'vue-router';
import AuthService from './services/AuthService';

import Index from './pages/Index.vue';

Vue.use(VueRouter);

const routes = [
    {path: '/', name: 'index', component: Index, meta: {requiresAuth: true}},
    ...
];

const router = new VueRouter({
    routes
});

router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
        AuthService().getUser(user => {
            if (user) {
                next(vm => {
                    vm.user = user
                });
            } else {
                ...
            }
        });
    }
    ...
});

export default router;

这是我的 Index.vue

<template>
    <div>
        {{user}}
    </div>
</template>
<script type="text/ecmascript-6">
    export default {
        data(){
            console.log(this.user);
            console.log(this.$route.user);
            return {}
        },
        mounted(){
            console.log(this.user);
            console.log(this.$route.user);
        }
    }
</script>

一切都未定义

我不想beforeRouteEnter在我的组件中创建一个，因为它会进行第二次 API 调用。

Answer 1

我看到 3 个问题：

1. nextvue-router 文档显示您可以在组件的beforeRouteEnter而非全局中访问 vm beforeEach。

2. 在 中next，虚拟机已经创建，因为您可以访问其属性，因此您无法this.user在data函数中看到。也许在mounted函数中，但我们不知道 vm 是在组件挂载之前还是之后返回的。

3. 您不应该在虚拟机上设置顶级属性，因为它们不会响应：请参阅https://v2.vuejs.org/v2/api/#data和https://v2.vuejs.org/v2/api /#Vue-set .

也许您AuthService可以存储用户并且您的组件从那里获取用户？