AngularJS:基于身份验证的UI路由器条件

时间:2015-05-23 00:05:31

标签: angularjs angular-ui-router

我在我的Rails和Angular应用程序中使用Devise进行身份验证。我正在尝试根据用户是否经过身份验证对其中一个状态执行条件语句。

我正在使用onEnter回调函数来确定用户是否经过身份验证。

路线:

// Dashboard state
.state('dashboard', {
  url: '/dashboard',
  templateUrl: 'dashboard.html',
  controller: 'MainCtrl',
})

// Login state
.state('login', {
  url: '/login',
  templateUrl: '_login.html',
  controller: 'AuthCtrl',
  onEnter: ['$state', 'Auth', function($state, Auth) {
    Auth.currentUser().then(function (){
      $state.go('dashboard');
    })
  }]
})

// Register state
.state('register', {
  url: '/register',
  templateUrl: '_register.html',
  controller: 'AuthCtrl',
  onEnter: ['$state', 'Auth', function($state, Auth) {
    Auth.currentUser().then(function (){
      $state.go('dashboard');
    })
  }]
})

$urlRouterProvider.otherwise('dashboard');

导航控制器

// NAV controller
// ------------------------------
.controller('NavCtrl', ['$scope', 'Auth',

    // Main scope (used in views)
    function($scope, Auth) {

        $scope.signedIn = Auth.isAuthenticated;
        $scope.logout = Auth.logout;

        Auth.currentUser().then(function (user){
            $scope.user = user;
        });

        $scope.$on('devise:new-registration', function (e, user){
            $scope.user = user;
        });

        $scope.$on('devise:login', function (e, user){
            $scope.user = user;
        });

        $scope.$on('devise:logout', function (e, user){
            $scope.user = {};
        });
    }

])

认证控制器

// Authentification controller
// ------------------------------
.controller('AuthCtrl', ['$scope', '$state', 'Auth',

// Main scope (used in views)
function($scope, $state, Auth) {

    $scope.login = function() {
        Auth.login($scope.user).then(function(){
          $state.go('home');
        });
    };

    $scope.register = function() {
        Auth.register($scope.user).then(function(){
          $state.go('home');
        });
    };

}

]);

如何在仪表板状态下确定未经过身份验证的用户,并将其重定向到登录状态?

1 个答案:

答案 0 :(得分:0)

你有几个选择可以做这类事情:

1)在MainCtrl中添加一个检查if(!Auth.isAuthenticated) $state.go('login')的init()函数。下行是指在实例化控制器后它们失去auth,这不会重定向它们。

2)我假设您正在进行某种需要身份验证的后端呼叫。如果是这样,如果它们没有被authed,你可以通过http拦截器捕获401响应并重定向到那里登录。这是我一直使用的方法。

3)将一个$ watch附加到Auth.isAuthenticated从那里重定向