Как сделать задержку, когда пользователь проверяет Vue.js?

Question

У меня есть приложение SPA на Vue.js + Laravel. Логика авторизации, полностью делегированная приложению Laravel. Тем не менее, мне нужно проверить статус авторизации при изменении маршрутизации. Я создаю небольшой класс, который отвечает за него.

export default { 
user: { 
    authenticated : false 
}, 
check: function(context) { 
    context.$http.get('/api/v1/user').then((response) => { 
    if (response.body.user != null) { 
     this.user.authenticated = true 
    } 
    }, (response) =>{ 
    console.log(response) 
    }); 
} 

Внутри компонента есть метод, который вызывается при изменении URL-адреса.

beforeRouteEnter (to, from, next) { 
next(vm =>{ 
    Auth.check(vm); 
    if (!Auth.user.authenticated) { 
     next({path:'/login'}); 
    } 
}) 
} 

Функция next() данный Вью экземпляр приложения, а затем проверить объект пользователя. Если пользователь false, next() снова вызовет перенаправление на страницу входа. Все это работает, но только когда страница уже загружена. Если я перезагружу/страницу учетной записи, есть страница переадресации на/login, потому что запрос Api еще не завершен, но код продолжит выполнение. Есть идеи?

Answer 1

Выполнено. Нужно вернуть обещание как этот

check: function(context) { 
return context.$http.get('/api/v1/user').then((response) => { 
    if (response.body.user != null) { 
    this.user.authenticated = true 
    } 
}, (response) =>{ 
    console.log(response) 
    }); 
} 

и затем

beforeRouteEnter (to, from, next) { 
    Auth.check().then(()=>{ 
     if(!Auth.user.authenticated) 
     next({path:'/login'}) 
     else 
     next(); 
    }) 
} 

Answer 2

Довольно просто сделать, вы должны сделать свой код работать асинхронно и удерживайте маршрутизации до момента подачи запроса завершается.

export default { 
    user: { 
     authenticated : false 
    }, 
    check: function(context) { 
     return context.$http.get('/api/v1/user').then((response) => { 
      if (response.body.user != null) { 
       this.user.authenticated = true 
      } 
     }, (response) => { 
      console.log(response) 
     }); 
    } 
} 

затем

beforeRouteEnter (to, from, next) { 
    next(vm => { 
     Auth.check(vm).then(() => { 
      if (!Auth.user.authenticated) { 
       next({path:'/login'}); 
      } else { 
       next() 
      } 
     } 
    }) 
} 

Другие профессиональные советы

• Показать некоторые загрузки индикатора при загрузке поэтому приложение не кажется, замораживать (вы можете использовать глобальные хуки маршрутизатор для этого)
• Если вы используете vue-resource, рассмотрите возможность использования interceptors (возможно, в дополнение к проверкам маршрутизации)
• Рассмотрите возможность использования router.beforeEach так, что вам не нужно копировать-вставить beforeRouteEnter каждый компонент