Question

尝试将未经过身份验证的用户重定向到登录屏幕。

我使用ui.route r和一个指令来检查已记录的用户。但它不像我预期的那样工作。它不会在页面加载之前进行检查，并且会在连续重定向的情况下卡在该页面上。

路线配置：

//User profile
    .state('UserProfile', {
        url: "/u/:id",
        data: {
            restrict: true,
            name: "Your Profile",
            header: true,
            footer: false,
            css: true,
            transparentHeader: true
        },
        templateUrl: "app/partials/user/userProfile.html",
        controller: "userProfileController"
    })

//Login page for not authenticated users
    .state('LoginPage', {
        url: "/login/",
        data: {
            restrict: false,
            name: "Login",
            header: false,
            footer: false,
            css: false,
            transparentHeader: false
        },
        templateUrl: "app/partials/common/loginPage.html",
        controller: "loginController"
    })

服务：

.factory('userService', ['$cookies', function($cookies){

   var userData = {
        isLogged: false,
        userId: "",
        firstName: "",
        profilePic: ""
    };


    return userData;

}]);

指令：

socialMarkt.directive('checkUser', ['$rootScope', '$state', 'userService', function ($r, $state, userService) {
    return {
      link: function (scope, elem, attrs, ctrl) {
        $r.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams, options){
          event.preventDefault();
          if($state.current.data.restrict){
            if(!userService.isLogged){
              $state.go('LoginPage');
            }
          }
        });
      }
    }
  }]);

我刚将它添加到一个页面进行测试。因此，如果用户未登录，则可能会使用$state.go('LoginPage')重定向到登录页面。

Answer 1

我改变了我验证登录状态的方式。

即时通讯.run

.run(['$rootScope', '$state', 'userService', '$sessionStorage', function($rootScope, $state, userService, $sessionStorage){

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

    //Detecting sessions
    if($sessionStorage.userData){
        var goodORnot = $sessionStorage.userData.isLogged;
    }else{
        goodORnot = false;
    }

    var isAuthenticationRequired =  toState.data 
          && toState.data.requiresLogin 
          //&& !userService.isLogged
          && !goodORnot
      ;

    if(isAuthenticationRequired)
    {
      event.preventDefault();
      $state.go('LoginPage');
    }
  });
}]);

Answer 2

我看到的一个问题是你过早地调用了preventDefault（）。如果状态不受限制或用户已登录，则状态更改应该没有任何问题，而您将阻止它发生。 event.preventDefault（）应该在$ state.go之前（＆＃39; loginPage＆＃39;）;

使用angularJS + ui.router

2 个答案: