Question

我目前正在实现一个简单的用户身份验证，我希望用户只有在用户登录且令牌不为空时才能查看某些状态。这是因为在我的离子应用程序中，当我刷新状态时，即使用户已经登录并且用户有令牌，它也会立即进入我的默认页面。

所以在我的app.js中，我做了以下检查用户是否可以进入状态，

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

$ionicLoading.show({
  template: 'Loading...'
});

if (window.sessionStorage.token) {
  $http.defaults.headers.common.Authorization = window.sessionStorage.token;  
  $rootScope.localTokenKey = window.sessionStorage.token;
  $rootScope.isLoggedin = true;
}
else {
  $rootScope.isLoggedin = false;
}

if(toState.data) {
  if(!$rootScope.isLoggedin){
    $state.transitionTo('login', {}, { reload: true, inherit: true, notify: true})
  }
} else {
  console.log("FAILED")
}

}）

$ rootScope。$ on（＆＃34; $ stateChangeSuccess＆＃34;，function（event，toState，toParams，fromState，fromParams）{ $ ionicLoading.hide（）; }）;

状态提供程序配置这是各州的名单。

.config(function($stateProvider, $urlRouterProvider, $httpProvider) {


      $stateProvider
      //$controllerProvider.allowGlobals();

      .state('login', {
        url: "/login",
        templateUrl: "templates/login.html",
        controller: 'AppCtrl'
      })

      .state('app', {
        url: "/app",
        abstract: true,
        templateUrl: "templates/menu.html",
        controller: 'MainCtrl'
      })

      .state('app.dashboard', {
        url: "/dashboard",
        views: {
          'menuContent': {
            templateUrl: "templates/dashboard.html",
          }
        },
        authenticate : true
      })

      .state('app.case_status', {
        url: "/case_status",
        views: {
          'menuContent': {
            templateUrl: "templates/case_listing.html",
            controller: 'ReferralCtrl'
          }
        },
        authenticate : true
      })
      .state('app.case_status_single', {
        url: "/case_details",
        views: {
          'menuContent': {
            templateUrl: "templates/case_details.html",
            controller: 'ReferralCtrl'
          }
        },
        authenticate : true

      })

      .state('app.feedback', {
        url: "/feedback",
        views: {
          'menuContent': {
            templateUrl: "templates/feedback.html"
          }
        },
        authenticate : true

      })

      .state('app.new', {
        url: "/new_referral",
        views: {
          'menuContent': {
            templateUrl: "templates/new_referral.html",
            controller: 'NewCaseCtrl'
          }
        },
        authenticate : true
      })

      .state('app.settings', {
        url: "/settings",
        views: {
          'menuContent': {
            templateUrl: "templates/settings.html"
          }
        },
        authenticate : true
      })

      .state('logout', {
          url: "/logout",
          views: {
            'menuContent' : {
            }
          } 
      });

      // if none of the above states are matched, use this as the fallback
     //$urlRouterProvider.otherwise('/login');
    })

当我运行我的代码时，console.log（＆＃34;登录页面＆＃34;）在执行未识别的错误之前执行超过1000次，然后显示登录页面。

我做错了什么，我该如何解决这个问题。我正在使用AngularJS。

Answer 1

如果您不需要做任何事情（即用户已登录），请不要打扰拦截和阻止状态更改。

此外，我将更改逻辑以查找public标志而不是authenticate标志，并假设所有状态都需要身份验证。事实上，我会说你的“登录”状态评估toState.authenticate到false是你问题的根源。

最后，额外的状态数据应该放在data属性中。

总结

在任何公开状态

上使用public标记

.state('login', {
    url: "/login",
    templateUrl: "templates/login.html",
    controller: 'AppCtrl',
    data: {
        public: true
    }
})

并从其他州删除authenticate属性。

检查public标记或 $rootScope.isLoggedIn如果两者都为假，则转到login状态

$rootScope.$on('$stateChangeStart', function(event, toState) {
    $ionicLoading.show({
      template: 'Loading...'
    });

    if (!((toState.data && toState.data.public) || $rootScope.isLoggedIn)) {
        console.log("login page")
        event.preventDefault(); 
        $state.transitionTo('login', {}, { reload: true, inherit: true, notify: true});
    }
})

AngularJS：$ state.transitionTo（＆＃39; myState＆＃39;）不断重新加载angular-ui-router

1 个答案: