Страница в бесконечном цикле при попытке изменить маршрут

Question

Я пытаюсь изменить свой маршрут всякий раз, когда я беру токен входа в хранилище пользователя, поэтому пользователь попадает на страницу профиля или страницу входа. Но по какой-то причине страница оказывается в бесконечном цикле, когда я получаю доступ к / или /login. Как мне это исправить?

controller.js

$scope.isActive = function(viewLocation) {
  return viewLocation === $location.path();
};

vm.adsomaToken = localStorage.adsomaToken;
vm.adsomaUserId = localStorage.adsomaUserId;
vm.adsomaAccountType = localStorage.adsomaAccountType;
if(vm.adsomaToken && vm.adsomaUserId && vm.adsomaAccountType) {
   $window.location.href = "/";
} else {
   $window.location.href = "/login";
}

vm.logout = function() {
  localStorage.clear();
  $window.location.href = "/login";
};

index.html

<div class="gx-container" ng-controller="MainController as vm">
    <!-- Page Sidebar -->
    <div id="menu" class="side-nav gx-sidebar" ng-show="isActive('/login')">
    </div>
</div>

Answer 1

Работа напрямую с $ window.location - не лучший выбор, когда вам приходится иметь дело с динамической маршрутизацией.

Я рекомендую использовать UI-Router .

С помощью UI-Router вы можете зарегистрировать функцию, которая будет срабатывать после определенных событий навигации.

Попробуйте зарегистрировать функцию, которая будет выполняться при попытке ввести в состояние (или маршрут).

В этом примере я определил LoginHook , который проверяет, должен ли каждый переход перенаправляться на "/ login" или его можно разрешить.

LoginHook.js

LoginHook.$inject = ['$transitions','$state'];
export function LoginHook ($transitions, $state) {
    //
    $transitions.onEnter({/*Matching every destination*/}, $transition => {
        //
        if($transition.to().name !== 'login') {
            // 
            if( user.allowed ) { // Replace this with your auth check 
                //
                return true; // Allowing access
            } else {
                //
                redirectToLogin(); // Redirecting to "login" 
            }
        } else {
            // Avoiding auth checking if i'm going to "login"
            return true;
        }
    })
    //
    function redirectToLogin() {
        //
        $state.go('login');
    }
}

Отредактированный ответ

Как я вижу в вашей корзине, вы должны обработать текущую навигацию перед тем, как заменить ее другой.

Попробуйте это:

resolve: {
    data: function ($location, $window, $q) {
        if(!localStorage.adsomaToken && !localStorage.adsomaUserId && 
           !localStorage.adsomaAccountType) {
           //
           $q.reject('NOT ALLOWED');
           $location.path('/login');
        } else {
           $q.resolve('ALLOWED');
        }
    }
}