Angularjs ui-router. Làm thế nào để chuyển hướng đến trang

Question

đăng nhập tôi có 4 trạng thái: dashboard, dahboard.main, dashboard.minor, đăng nhập. trang tổng quan là trừu tượng và nó là trạng thái gốc cho trạng thái .minor và .main. Dưới đây là mã của tôi:

.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' } 
    }) 

Như bạn thấy trong trạng thái trang tổng quan, tôi có tùy chọn giải quyết. Bằng cách này tôi muốn chuyển hướng người dùng đến trang đăng nhập nếu anh ta không được ủy quyền. Vì lý do này, tôi sử dụng đặc biệt authenticationSvc dịch vụ:

.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 
    }; 
}]); 

tôi kiểm tra giá trị auth trong cấu hình:

.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'); 
     } 
    }); 
}); 

Nhưng tiếc là khi tôi đi đến trạng thái gốc trang web hoặc bảng điều khiển của tôi, tôi nhận được một sản phẩm nào trang. Có gì sai với mã này? Cảm ơn!

Answer 1

Vấn đề là, không chuyển hướng nếu không cần thiết === nếu đã được chuyển hướng đến trạng thái dự định. Có a working plunker với giải pháp tương tự

.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 
     } 
    }); 
}); 

Kiểm tra những giải thích tương tự:

• Angular ui router - Redirection doesn't work at all
• How can I fix 'Maximum call stack size exceeded' AngularJS

Answer 2

Vì bạn đang sử dụng mô-đun Giao diện người dùng, bạn nên sử dụng các sự kiện $stateChangeStart, $stateChangeSuccess.

Kiểm tra liên kết này để biết thêm: https://github.com/angular-ui/ui-router/issues/17

Cũng có một lỗi đánh máy trong consol.log(userInfo) trong console.

Kiểm tra bảng điều khiển trong công cụ chrome-dev của bạn. Nó sẽ cung cấp cho ý tưởng nếu một cái gì đó khác là mất tích.

Answer 3

Ghi chú rằng thực sự $stateChangeSuccess Sự kiện này được phản và không còn có sẵn trong angular-ui-route p ackage. Bây giờ, hành vi này được xử lý bởi transition hooks. Bạn có thể đạt được mục đích của bạn sử dụng $transitions.onStart như sau:

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 
    } 
    }); 
}