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

我通常将文件分开，然后将js文件导入我的页面，以下是我实施 beforeEach 规则的方法：

路由文件：

import VueRouter from 'vue-router';

let routes = [
  {
    path: '/',
    component: require('./views/Home')
  },
  {
    path: '/about',
    component: require('./views/About'),
  }
];

export default new VueRouter({
    routes,
});

Vue App文件：

import router from './routes';

// Here goes my logic
router.beforeEach((to, from, next) => {
    if ( from.name == 'About' ) {
        next(false);
    } else {
        next();
    }
});

const app = new Vue({
    el: '#app',

    router
});

希望它有所帮助！

Answer 2

我看到3个问题：

1）vue-router文档显示您可以访问组件next中的beforeRouteEnter中的vm，而不是全局beforeEach。

2）在next中，vm已经创建，因为您可以访问其属性，因此您将无法在this.user函数中看到data。可能在mounted函数中，但我们不知道在安装组件之前或之后是否返回了vm。

3）您不应在vm上设置顶级属性，因为它们不会被动：请参阅https://vuejs.org/v2/api/#data和https://vuejs.org/v2/api/#Vue-set。

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

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

2 个答案: