0

我有一个 Angular 应用程序，问题是，当{{controllername.name}}显示用户名消失时，会话超时后，即使出现ngIdle的警告，用户仍然可以刷新屏幕，它让你在页面上不会让你返回到登录页面。

20{{ctrlDash.userinfo.name}}分钟后消失。（见下文）

<ul class='nav'>
    <li class='dropdown dark user-menu'>
        <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
            <img width="23" height="23" alt="" src="assets/images/avatar.jpg" />
            <span class='user-name'>{{ctrlDash.userInfo.name}}</span>
            <b class='caret'></b>
        </a>
        <ul class='dropdown-menu'>
            <li>
                <a href='user_profile.html'>
                    <i class='icon-user'></i>
                    Profile
                </a>
            </li>
            <li>
                <a href='user_profile.html'>
                    <i class='icon-cog'></i>
                    Settings
                </a>
            </li>
            <li class='divider'></li>
            <li>
                <a href='sign_in.html' target="_self">
                    <i class='icon-signout'></i>
                    Sign out
                </a>
            </li>
        </ul>
    </li>
</ul>

所以，现在，我希望模板中的这个功能在发生这种情况时“检测”并强制用户再次登录；

这是ng-template在底部的同一页面上：

<!-- Templates for Modals -->
    <script type="text/ng-template" id="warning-dialog.html">
        <div class="modal-header">
            <h3>You're Idle. Do Something!</h3>
        </div>
        <div class="modal-body" idle-countdown="countdown" ng-init="countdown=5">
            <p>You'll be logged out in <span class="label label-warning">{{countdown}}</span> <span ng-pluralize="" count="countdown" when="{'one': 'second', 'other': 'seconds' }"></span>.</p>
            <progressbar max="20" value="countdown" animate="true" class="progress-striped active" type="warning"></progressbar>
        </div>
        <div class="modal-footer">
            Quick! Move your mouse and your session will reset...
        </div>

    </script>
    <script type="text/ng-template" id="timedout-dialog.html">
        <div class="modal-header">
            <h3>Oh, Snap! You've Timed Out!</h3>
        </div>
        <div class="modal-body">
            <p>
            You were idle too long.  Click the button below to be redirected to the login page and begin again.
            </p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-danger btn-small" data-ng-click="goBack()">Back To Login</button>
        </div>
    </script>
    <!-- End Templates for Modals -->

首先 TIMER 检测到 IDLE，然后 WARNING 弹出并告诉用户，OOPS，您需要登录。但是，当我点击刷新时，它会刷新页面，但{{ctrlDash.userInfo.name}}现在是空的。

这是 ngIdle 的代码

//This is the IDLE function
            $scope.started = false;
            $scope.ended = false;

            $scope.events = [];
            $scope.idle = 20; //this is in ACTUAL seconds
            $scope.timeout = 20; //this is in ACTUAL seconds

            function closeModals() {
                if ($scope.warning) {
                    $scope.warning.close();
                    $scope.warning = null;
                }

                if ($scope.timedout) {
                    $scope.timedout.close();
                    $scope.timedout = null;
                }
            }

            $scope.$on('IdleStart', function () {
                closeModals();

                $scope.warning = $modal.open({
                    templateUrl: 'warning-dialog.html',
                    windowClass: 'modal-danger'
                });
            });

            $scope.$on('IdleEnd', function () {
                closeModals();
            });

            $scope.$on('IdleTimeout', function () {
                closeModals();
                $scope.timedout = $modal.open({
                    templateUrl: 'timedout-dialog.html',
                    windowClass: 'modal-danger'
                });
            });

            $scope.start = function () {
                closeModals();
                Idle.watch();
                $scope.started = true;
            };

            $scope.stop = function () {
                closeModals();
                Idle.unwatch();
                $scope.started = false;

            };
            if(!angular.isDefined($scope.goBack)) {

                console.log("I\'m not defined...");

                if(!angular.isFunction($scope.goBack)) {

                    console.log("I\'m not a function...")
                }
            }

            $scope.goBack = function _goBack() {
                closeModals();
                Idle.unwatch();
                $window.location.href = $scope.templateViews.logout;
            };

最后： 中的goBack()函数controller = dashboardController抛出错误

未引用的错误，goBack 未定义。

这些是我的问题。很想帮忙，拜托。感谢大家。

4

1 回答 1

0

我正在开发我的第一个角度应用程序，所以无论如何都不是大师。我实现了注销功能。当用户在注销后尝试访问任何页面时，控制器会检查是否存在凭据，如果不存在，则会将它们发送回登录页面，其中包含：

`$location.path('/login');`

--根据评论更新

我有 2 个服务模块（带工厂）。1 - 与 REST 端点通信，2 - 处理我所有的业务。当用户登录成功时，我将用户的信息传递给 setCreds 函数。

var businessService = angular.module('businessService, ['ngCookies' ]);
businessService.factory('setCreds', ['$cookies', function ($cookies) {
    return function(un, pw, userRole) {
        var token = un.concat(":", pw);
        $cookies.creds = token;
        $cookies.usersRole = userRole;

然后，在获取视图所需的任何信息之前，我检查所有控制器的第一件事是 checkCreds。

if (!checkCreds()) {       
    $location.path('/login');
} else { ..proceed with getting stuff

我的 checkCreds 看起来像：

businessService.factory('checkCreds', ['$cookies', function ($cookies) {
    return function () {
        var returnVal = false;
        var creds = $cookies.creds;
        if (creds !== undefined && creds !== "") {
            returnVal = true;
        }
        return returnVal;
    };}]);

确保将您的 businessService 注入您的应用程序，并将您要使用的服务工厂注入您的控制器。

于 2015-05-11T16:03:12.197 回答