AngularJS - как вызвать конечную точку в маршруте разрешения? - PullRequest
Новая
       11

AngularJS - как вызвать конечную точку в маршруте разрешения?

0 голосов
/ 10 февраля 2020

Я работаю над проектом AngularJS 1.5.3.

В моем приложении есть одна страница, которой требуется некоторая информация о сервере, прежде чем перейти на страницу. Это как охранник маршрута. Никакие другие страницы не нуждаются в этой информации, прежде чем продолжить.

Как я могу заставить это работать в моем решении маршрута? Это правильный подход к этой проблеме?

например 

.state('verifyCredentials', {
    url: '/verifyCredentials',
    templateUrl: 'verifyCredentials/verify-credentials.html',
    controller: 'VerifyCredentialsController',
    controllerAs: 'verifyCredentialsController',
    resolve: {

        //calls http request
        authentication
            .getInfo()
            .then(function(response) {
                if(response.goToHome === true) {
                    //$state.go('home);
                } else {
                    //proceed to verify credentials
                }

            })
    }
})

1 Ответ

1 голос
/ 11 февраля 2020

Разрешение AngularJS (1.x): блок - это объект в определении состояния. Каждый ключ - это имя данных для загрузки, а каждое значение - это функция, которая возвращает обещание для данных. Функции разрешения вводятся с помощью инжектора Angular.

Пример можно найти в учебнике по ui-router .

Вы не предоставляете действительный объект для своего разрешить. Аутентификация должна быть значением ключа. Вот как должно выглядеть ваше разрешение. 

.state('verifyCredentials', {
    url: '/verifyCredentials',
    templateUrl: 'verifyCredentials/verify-credentials.html',
    controller: 'VerifyCredentialsController',
    controllerAs: 'verifyCredentialsController',
    resolve: {
       authenticate: function(authentication, $state) { // you'll need to inject $state 
 and your authentication service here if you want to use them.
           return authentication
               .getInfo()
               .then(function(response) {
                   if(response.goToHome === true) {
                       $state.go('home');
                   } else {
                    //proceed to verify credentials
                   }

               });
    }
})

Другая возможность - использовать метод redirectTo для объекта состояния для перенаправления в другое состояние в зависимости от разрешения.

Используйте redirectTo с разрешением следующим образом: 

.state('verifyCredentials', {
  resolve: {
    authResolve: function(authenticate) {
      return authentication.getInfo();
    }
  },
  redirectTo: (trans) => {
    // getAsync tells the resolve to load
    let resolvePromise = trans.injector().getAsync('authResolve')
    return resolvePromise.then(resolveData => {
      return resolveData.loggedIn === true ? 'home' : null; // go to home if logged in, else stay on this route in order to continue with credentials flow.
    )}
})

Вот как do c рекомендует обрабатывать, разрешает. Они используют компонентную архитектуру. 

.state('verifyCredentials', {
    url: '/verifyCredentials',
    component: 'verifyCredentialsComponent',
    resolve: {
       authenticateData: function(authentication, $state) { // you'll need to inject $state 
 and your authentication service here if you want to use them.
           return authentication
               .getInfo()
               .then(function(response) {
                   if(response.goToHome === true) {
                       $state.go('home');
                   } else {
                    //proceed to verify credentials
                   }

               });
    }
})

// component
angular.module('app').component('verifyCredentialsComponent', {
  bindings: {
    authenticateData: '<'
  },
  template: '<div></div>'
  controller: function() {
    ...
  }
})
...