Как сделать задержку, когда пользователь проверяет 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() данный экземпляр приложения Vue, затем проверьте объект пользователя. Если пользователь false, next() позвоните еще раз для перенаправления на страницу входа. Все это работает, но только когда страница уже загружена. Если я перезагружу страницу / аккаунт, будет перенаправление на страницу / логин, потому что запрос к 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, рассмотрите возможность использования перехватчиков (возможно, в дополнение к проверкам маршрутизации)
• Рассмотреть возможность использования router.beforeEach так что вам не нужно копировать-вставить beforeRouteEnter к каждому компоненту