vuejs2 - 如何在 vuejs 组件中的 router.beforeEach 中注入(inject)数据？

Question

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

这是我的路线定义:

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规则的方法:

1. 路线文件:

   import VueRouter from 'vue-router';
   
   let routes = [
     {
       path: '/',
       component: require('./views/Home')
     },
     {
       path: '/about',
       component: require('./views/About'),
     }
   ];
   
   export default new VueRouter({
       routes,
   });
   

2. Vue 应用程序文件:

   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
   });
   

希望对你有帮助!