Question

我使用AngularJS和ui-router，这是我当前的app.js配置。

'use strict';

angular.module('nodeserverApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'ui.bootstrap',
'ui.router'
])
.config(function ($routeProvider, $locationProvider, $httpProvider , $stateProvider , $urlRouterProvider) {

$stateProvider
    .state('home', {
        url: '/',
        templateUrl: 'partials/user/main',
        controller: 'MainCtrl'
    })
    .state('dashboard', {
        url: '/user/dashboard',
        templateUrl: 'partials/user/dashboard/main',
        controller: 'UserDashboardDashboardCtrl',
        authenticate: true
    })
    .state('dashboard.welcome', {
        url: '/welcome',
        parent: 'dashboard',
        templateUrl: 'partials/user/dashboard/welcome'
    })
    .state('dashboard.account', {
        url: '/account',
        templateUrl: 'partials/user/dashboard/account',
        controller: 'UserDashboardAccountCtrl'
    })
    .state('dashboard.address', {
        url: '/address',
        templateUrl: 'partials/user/dashboard/address/index'

    })
    .state('dashboard.address.view', {
        url: '/view',
        templateUrl: 'partials/user/dashboard/address/view',
        controller: 'UserDashboardAddressViewCtrl'

    })
    .state('dashboard.address.new', {
        url: '/new',
        templateUrl: 'partials/user/dashboard/address/new',
        controller: 'UserDashboardAddressNewCtrl'

    })
    .state('login', {
        url: '/user/login',
        templateUrl: 'partials/user/login',
        controller: 'LoginCtrl'
    })
    .state('signup', {
        url: '/user/signup',
        templateUrl: 'partials/user/signup',
        controller: 'SignupCtrl'
    })
    .state('settings', {
        url: '/user/settings',
        templateUrl: 'partials/user/settings',
        controller: 'SettingsCtrl',
        authenticate: true
    });

$urlRouterProvider.otherwise("/");

$locationProvider.html5Mode(true);

// Intercept 401s and 403s and redirect you to login
$httpProvider.interceptors.push(['$q', '$location', function($q, $location) {
  return {
    'responseError': function(response) {
      if(response.status === 401 || response.status === 403) {
        $location.path('/user/login');
        return $q.reject(response);
      }
      else {
        return $q.reject(response);
      }
    }
  };
}]);
})
.run(function ($rootScope, $state, Auth) {
    $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
        if (toState.authenticate && !Auth.isLoggedIn()){
            // User isn’t authenticated
            $state.transitionTo("login");
            event.preventDefault();
        }
    });
});

正如您所看到的，仪表板需要身份验证，我怎样才能让孩子继承像dashboard.welcome，dashboard.address.view等身份验证，而无需指定每个身份？

Answer 1

我知道这已经过时了，但对于未来的Google员工，请注意data属性是由子状态继承的，因此您可以在父级中放置类似此authenticate标记的内容。对你的这些修改应该可以解决问题：

$stateProvider：

.state('dashboard', {
    url: '/user/dashboard',
    templateUrl: 'partials/user/dashboard/main',
    controller: 'UserDashboardDashboardCtrl',
    data: {
        authenticate: true
    }
})

angular.module：

.run(function ($rootScope, $state, Auth) {
    $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
        if (toState.data.authenticate && !Auth.isLoggedIn()){
            // User isn’t authenticated
            $state.transitionTo("login");
            event.preventDefault();
        }
    });
});

Answer 2

我希望这个链接会有所帮助，这是来自Frederik Nakstad的关于AngularJS单页验证的精彩文章，抱歉但无法为您提供详细代码

http://frederiknakstad.com/2013/01/21/authentication-in-single-page-applications-with-angular-js/

AngularJs与ui.router如何为其子项设置身份验证

2 个答案: