Question

我在尝试阻止用户访问其他观看时遇到了一些问题。这是我的模块：

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'
        });

如果我在搜索栏中写下这个http://localhost/project/#/UserInformation/UpdateCI，它将转到该页面而我不想要，首先我希望用户登录，然后他们可以访问UpdateAddress，UpdateContactInformation和等等。
帮我提一些建议。感谢。

Answer 1

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

我建议您使用ngCookies来执行此操作，因为如果用户刷新其页面，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');
    }
}]);

您的loginService看起来像：

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);
        }
    }
}]);

您的customerInfoCtrl控制器如下所示：

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并将其注入以下模块中：

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

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

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

1 个答案: