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

我使用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等的身份验证,而无需指定每个身份验证？

解决方法:

我知道这已经很老了,但对于未来的Google员工,请注意数据属性是由子状态继承的,因此您可以在父级中放置类似此身份验证标志的内容.对你的这些修改应该可以解决问题：

对于$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();
        }
    });
});

标签：javascript,angularjs,angular-ui-router,angular-ui
来源： https://codeday.me/bug/20190711/1437080.html