Как правильно валидировать токен при запросе шаблона?

Question

[Artem Verbat]

Клиенское приложение находиться отдельно от сервера с API. Соотвественно возник вопрос, как контролировать доступ к шаблонам. Решил делать запрос к API, перед загрузкой шаблона, отправляя токен на проверку.

Как реализовал:

app.run(function($rootScope, $state, AuthService) {
  let transitionIsAllowed = false;
  
  $rootScope.$on('$stateChangeStart', (event, toState, toParams) => {  
    if (toState.authenticate && !transitionIsAllowed) {
      event.preventDefault();
  
      AuthService.confirmToken().then(response => {
        transitionIsAllowed = true;
        $state.go(toState, toParams);
      }, error => {
        console.log(error);
        $state.go('logout');
      });
    }
  });

  $rootScope.$on('$stateChangeSuccess', () => {
    transitionIsAllowed = false;
  });
});

Оно работает. Но плохо. Возникает ошибка:

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

Код выполняется множество раз, что ведёт к проблемам в других частях приложения.

Вопрос: Насколько мой вариант нормален для решения задачи, что исправить, что-бы избавиться от ошибки?

Второй вариант реализации, через http интерцептор:

function ($q, $injector, AuthToken) {
  return {
    request: function (config) {
      if (
        (config.url.indexOf('views/app/dashboard') === 0) ||
        (config.url.indexOf('views/app/cabinet') === 0)
      ) {
        const deferred = $q.defer();

        $injector.get('AuthService').confirmToken().then(function () {
          deferred.resolve(config);
        }, function () {
          deferred.reject(config);
        });

        return deferred.promise;
      }

      return config;
    },
    responseError: function (response) {
      if (response.status === 401 || response.status === 403) {
        $injector.get('$state').go('logout');
      }

      return $q.reject(response);
    }
  };
}

Этот вариант работает. Но в случае когда токен не валиден, выводится такое:

Error: [$compile:tpload] Failed to load template: views/app/dashboard/dashboard.html (HTTP status: undefined undefined)

Почему? Как исправить?

Answer 1

[ozknemoy]

похоже $state.go внутри confirmToken запускает новое событие $stateChangeStart и получается бесконечный цикл. надо либо в resolve каждого state логику городить, но это много писать коду. либо не делать event.preventDefault() и после провала confirmToken просто редиректить на главную/делать $state.go('logout'). можно еще попробовать возвращать event.preventDefault() в промисе но наверно состояние все равно успеет поменяться

Comments

[Artem Verbat]

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

[ozknemoy]

побаловался с промисами в stateChangeStart ничего не получится ибо бесконечный цикл. чтобы каждый стейт отдельно не проверять можно поставить один interceptor гет запросов и с бека отправлять аутентификацию в нужных запросах. потом это дело парсить

[Artem Verbat]

ozknemoy: Добавил в шапку вариант с интерцептором, работает, но выводит сообщение об ошибке:

Error: [$compile:tpload] Failed to load template: views/app/dashboard/dashboard.html (HTTP status: undefined undefined)