Angularjs UI 라우터.로그인 페이지로 리다이렉트하는 방법

Angularjs UI 라우터.로그인 페이지로 리다이렉트하는 방법

상태는 대시보드, dahboard.main, dashboard.minor, login의 4가지입니다.대시보드는 추상적이며 .dashboard 및 .main 상태의 부모 상태입니다.다음은 내 코드입니다.

.state('dashboard', {
        url: "/dashboard",
        abstract: true,
        templateUrl: "views/dashboard.html",
        resolve: {
            auth: function ($q, authenticationSvc) {
                var userInfo = authenticationSvc.getUserInfo();
                if (userInfo) {
                    return $q.when(userInfo);
                } else {
                    return $q.reject({ authenticated: false });
                }
            }
        },
        controller: "DashboardCtrl",
        data: { pageTitle: 'Example view' }
    })
    .state('dashboard.main', {
        url: "",
        templateUrl: "views/main.html",
        controller: "DashboardCtrl",
        data: { pageTitle: 'Main view' }
    })

대시보드 상태에서 볼 수 있듯이 해결 옵션이 있습니다.이것에 의해, 권한이 없는 유저의 로그인 페이지로 리다이렉트 하고 싶다고 생각하고 있습니다.이러한 이유로 특별한 authenticationSvc 서비스를 사용합니다.

.factory("authenticationSvc", ["$http", "$q", "$window", function ($http, $q, $window) {
    var userInfo;

    function login(email, password) {
        var deferred = $q.defer();

        $http.post("/api/login", { email: email, password: password })
            .then(function (result) {
                if(result.data.error == 0) {
                    userInfo = {
                        accessToken: result.data.accessToken
                    };
                    $window.sessionStorage["userInfo"] = JSON.stringify(userInfo);
                    deferred.resolve(userInfo);
                }
                else {
                    deferred.reject(error);
                }
            }, function (error) {
                deferred.reject(error);
            });

        return deferred.promise;
    }
    function getUserInfo() {
        return userInfo;
    }
    return {
        login: login,
        logout: logout,
        getUserInfo: getUserInfo
    };
}]);

config에서 auth 값을 확인합니다.

.run(function($rootScope, $location, $state) {
    $rootScope.$state = $state;
    $rootScope.$on("routeChangeSuccess", function(userInfo) {
        consol.log(userInfo);
    });
    $rootScope.$on("routeChangeError", function(event, current, previous, eventObj) {
        if(eventObj.authenticated === false) {
            $state.go('login');
        }
    });
});

그러나 웹 사이트 루트 또는 대시보드 상태로 이동하면 빈 페이지가 나타납니다.이 코드에 무슨 문제가 있나요?감사합니다!

요점은 이미 의도된 상태로 리디렉션된 경우 ===가 필요하지 않으면 리디렉션하지 말라는 것입니다.유사한 솔루션을 가진 작동 중인 플런커가 있습니다.

.run(function($rootScope, $location, $state, authenticationSvc) {


    $rootScope.$on( '$stateChangeStart', function(e, toState  , toParams
                                                   , fromState, fromParams) {

        var isLogin = toState.name === "login";
        if(isLogin){
           return; // no need to redirect 
        }

        // now, redirect only not authenticated

        var userInfo = authenticationSvc.getUserInfo();

        if(userInfo.authenticated === false) {
            e.preventDefault(); // stop current execution
            $state.go('login'); // go to login
        }
    });
});

유사한 설명에 대해서는 다음 사항을 확인하십시오.

• 각도 UI 라우터 - 리다이렉션이 전혀 작동하지 않음
• Maximum call stack size exceeded' 각도 수정 방법JS

UI-Router 모듈을 사용하고 있기 때문에,$stateChangeStart,$stateChangeSuccess이벤트입니다.

자세한 것은, https://github.com/angular-ui/ui-router/issues/17 를 참조해 주세요.

또, 에 오타가 있습니다.consol.log(userInfo)콘솔로 이동합니다.

chrome-dev-tools 콘솔을 확인합니다.뭔가 빠진 게 있으면 알 수 있을 거예요.

주의할 점은$stateChangeSuccess이벤트는 폐지되어 에서 사용할 수 없게 되었습니다.angular-ui-route패키지.이 동작은 에 의해 처리됩니다.다음과 같이 목적을 달성할 수 있습니다.

run.$inject = ['$transitions', 'authenticationSvc'];
function run($transitions, authenticationSvc) {

  $transitions.onStart({}, function (trans) {
    var userInfo = authenticationSvc.getUserInfo();

    var $state = trans.router.stateService;

    if(userInfo.authenticated === false) {
        $state.go('login'); // go to login
    }
  });
}

언급URL : https://stackoverflow.com/questions/27212182/angularjs-ui-router-how-to-redirect-to-login-page