Angularjs 如何防止用户使用stateprovider访问其他视图

当我试图阻止用户访问我的其他视图时，我遇到了一些问题。 这是我的模块：

angular.module('Project', ['ui.bootstrap', 'ui.bootstrap.tpls', 'cgBusy', 'ui.router', 'templates', 'pascalprecht.translate'])
    .value('cgBusyDefaults', {
        message: 'Please wait ...',
        backdrop: true,
        delay: 300
    })
    .config(function ($stateProvider, $urlRouterProvider) {
        $stateProvider.state('LoginForCustomerInfo', {
            url: '/LoginForCustomerInfo',
            templateUrl: 'app/WebShop/ProjectFeatures/LoginForCustomerInfo/templates/customerInfo.html',
            controller: 'customerInfoCtrl'
        });
        $stateProvider.state('UserInformation', {
            url: '/UserInformation',
            controller: 'UserInformationCtrl',
            templateUrl: 'app/WebShop/ProjectFeatures/UserInformation/templates/userInformation.html'
    }).state('UserInformation.updateAddress', {
            url: '/UpdateAddress',
            templateUrl: 'app/WebShop/ProjectFeatures/UpdateAddressInformation/templates/addressUpdate.html',
            controller: 'AddressController'
        }).state('UserInformation.updateContactInfo', {
            url: '/UpdateCI',
            templateUrl: 'app/WebShop/ProjectFeatures/UpdateContactInformation/templates/contactUpdate.html',
            controller: 'ContactController'
        }).state('UserInformation.viewVoucherHistory', {
            url: '/ViewVoucherHistory',
            templateUrl: 'app/WebShop/ProjectFeatures/ViewVoucherHistory/templates/viewVoucherHistory.html',
            controller: 'voucherhistoryCtrl'
        }).state('UserInformation.shoppingCart', {
            url: '/ShoppingCart',
            templateUrl: 'app/WebShop/ProjectFeatures/ShoppingCart/templates/shoppingCart.html',
            controller: 'ShoppingCartController'
        });

如果我在搜索栏中写下这个，它会转到那个页面，我不希望这样，首先我希望用户登录，然后他们可以访问UpdateAddress、UpdateContactInformation等等。

---

帮我提些建议。谢谢。

为了防止用户在未登录的情况下访问页面，您应该使用run功能并检查客户端是否已登录。如果他不在，检查他是否在登录页面以外的其他页面上，如果他在，则重定向

我建议您使用它，因为如果用户刷新其页面，AngularJS本身无法保存数据。我希望您不需要对这个应用程序进行安全化，因为它不是这样的

我会这样写：

app.run(['$route', '$location', 'loginService', function($route, $location, loginService) {
    if ($route.current !== '/LoginForCustomerInfo' && !loginService.isLogged()) { // Redirect if the user is not logged and not the login page
        $location.path('/LoginForCustomerInfo');
    }
}]);

<script src="//ajax.googleapis.com/ajax/libs/angularjs/XXXX/angular-cookies.js"></script>

angular.module('myApp', ['ngCookies']);

您的登录服务看起来像：

app.factory('loginService', ['$cookieStore', function ($cookieStore) {
    return {
        isLogged: function () { // Check if user is logged
            return $cookieStore.get('id') !== null;
        },
        loggin: function (id) { // Store its id in the browser's cookies
            $cookieStore.put('id', id);
        }
    }
}]);

app.controller('customerInfoCtrl', '$location', ['loginService', function($loginService, $location) {

    if (loginService.isLogged()) { // If user is yet logged, redirect
        $location.path('/UserInformation');
    }

    $scope.submit(function() { // When submit the login form, put the id in the browser's cookies
        loginService.login($scope.id);
        $location.path('/UserInformation');
    });
}]);

您的customerInfoCtrl控制器如下所示：

app.factory('loginService', ['$cookieStore', function ($cookieStore) {
    return {
        isLogged: function () { // Check if user is logged
            return $cookieStore.get('id') !== null;
        },
        loggin: function (id) { // Store its id in the browser's cookies
            $cookieStore.put('id', id);
        }
    }
}]);

app.controller('customerInfoCtrl', '$location', ['loginService', function($loginService, $location) {

    if (loginService.isLogged()) { // If user is yet logged, redirect
        $location.path('/UserInformation');
    }

    $scope.submit(function() { // When submit the login form, put the id in the browser's cookies
        loginService.login($scope.id);
        $location.path('/UserInformation');
    });
}]);

不要忘记包括angular-cookie.js并将其注入如下模块：

app.run(['$route', '$location', 'loginService', function($route, $location, loginService) {
    if ($route.current !== '/LoginForCustomerInfo' && !loginService.isLogged()) { // Redirect if the user is not logged and not the login page
        $location.path('/LoginForCustomerInfo');
    }
}]);

<script src="//ajax.googleapis.com/ajax/libs/angularjs/XXXX/angular-cookies.js"></script>

angular.module('myApp', ['ngCookies']);

---

谢谢你的回答，但我的登录只是一个数字，如果每个人都是杂志的客户，那么你怎么知道客户是否是杂志的一部分呢？好的，在登录页面上，你只需要输入一个数字，然后当你访问其他页面时，你使用这个数字？若用户并没有id，你们想阻止访问除登录之外的其他页面吗？是的，这就是我想要的。