Как я могу вводить данные в router.beforeEach в моем компоненте vuejs?

Question

Я использую router.beforeEach для защиты некоторого вида. Я забираю моего пользователя перед тем, как войти в свой vue. Я хочу использовать этого пользователя на всех моих аутентифицированных страницах. Как я могу вводить данные в router.beforeEach в моем компоненте vuejs?

Вот мои маршруты определение:

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) Документация ви-маршрутизатор показывает, вы можете получить доступ к виртуальной машине в next в компонентной beforeRouteEnter, а не глобальный beforeEach.

2) В next, виртуальная машина уже создана, потому что вы можете получить доступ к его свойства, так что вы не смогли бы увидеть this.user в функции data. Возможно, в функции mounted, но мы не знаем, возвращается ли vm до или после установки компонента.

3) Вы не должны устанавливать свойства верхнего уровня на vm, потому что они не будут реагировать: см. https://vuejs.org/v2/api/#data и https://vuejs.org/v2/api/#Vue-set.

Возможно, ваш AuthService может хранить пользователя и ваши компоненты, чтобы получить пользователя оттуда?

Answer 2

Я обычно отдельные файлы, а затем импортировать файл 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. Вьет 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 
   }); 
   

Надеюсь, это поможет!