如何在angularjs应用程序中注销后，通过浏览器后退按钮禁止用户访问上一页

Question

我有一个angularjs web应用程序。我尽量不允许用户在注销后使用浏览器后退按钮转到上一页。我想向用户显示一个类似"请登录以继续"的消息。我想不通。请提出建议。

Answer 1

您可以使用两种方式禁用对上一页的访问：

1. 使用$stateChangeStart，此方法在状态更改时调用，查找令牌，如果找不到令牌，则重定向用户登录
2. use resolve:resolve将在相应状态的路由发生之前获得调用，因此在resolve内部

方法1:

$rootScope.$on('$stateChangeStart', 
function(event, toState, toParams, fromState, fromParams){         
    // check if user is navigating to anypage other than login, if so check for token, if token is not present redirect to login page        
});

方法2:

$stateProvider.state("dashboard", {      
  resolve: { 
  // check if user is navigating to anypage other than login, if so check for token, if token is not present redirect to login page by using defer 
  }
})

Answer 2

在这篇mdn文章中，我们解释了如何操作浏览器历史：

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#Adding_and_modifying_history_entries

在我的一个旧项目中，我用它创建了一个"到上一页"按钮。

Answer 3

您可以实现类似的功能，对不同的内容进行访问控制。请注意，您还必须确保后端的安全。

在为ui.router定义状态的位置，可以添加用户定义的数据。例如：

angular.module("app", ['ui.router']).config(['$stateProvider', function($stateProvider){
    $stateProvider.state('yourSecureState', {
                    url: '/secure-state',
                    templateUrl: '/app/views/secure.html',
                    controller: 'SecureStateController',
                    data: {
                        accessLevel: "secured-feature",
                        title: 'Secured State'
                    }
                });
}]);

有了这些额外的信息，如果所需的访问级别可用，您可以在身份验证服务中进行检查：

angular.module('app').factory('AuthService', ['$rootScope', function($rootScope){
    $rootScope.$on('$stateChangeStart', function (event, nextState) {
            if (nextState.data && nextState.data.accessLevel && !service.isAuthorized(nextState.data.accessLevel)) {
                event.preventDefault();
                alert("Not Authorized");
            }
        });
    var service = {
       isAuthorized: function(accessLevel) {
            //your code here:
       }
    };
    return service;
}]);

Answer 4

prevent-default和window.history.forward（）的组合解决了这个问题。

$rootScope.$on('$stateChangeStart', 
   function(event, toState, toParams, fromState, fromParams){ 
      event.preventDefault();
      window.history.forward();
});

其思想是event.prventDefault（）删除历史堆栈。因此，如果我们从page1->page2->page3开始，preventDefault只在到达主页时有效。forwarding（）是保持重定向到同一页面所必需的。

Answer 5

以下代码禁用整个应用程序中的浏览器返回按钮：

var allowNav = false;
var checkNav = false;
$rootScope.$on(
    '$stateChangeSuccess',
    function (event, toState, toStateParams, fromState, fromStateParams) {
        allowNav = checkNav;
        checkNav = true;
    }
);
$rootScope.$on(
    '$locationChangeStart',
    function (event, next, current) {
        // Prevent the browser default action (Going back)
        if (checkNav) {
            if (!allowNav) {
                event.preventDefault();
            } else {
                allowNav = false;
            }
        }
    }
);

Answer 6

app.config(["$routeProvider", function($routeProvider) {
            return $routeProvider.when("/", {
                redirectTo: "/login"
            }).when("/dashboard", {
                templateUrl: "views/dashboard.html"
            }).when("/login", {
                templateUrl: "views/login.html"
            }).when("/pages/openAcc", {
                templateUrl: "views/pages/openAcc.html"
            }).when("/pages/docUpload", {
                templateUrl: "views/pages/docUpload.html"
            }).when("/pages/listview", {
                templateUrl: "views/pages/listview.html"
            }).otherwise({
                redirectTo: "/404"
            })
        }])    .run(function($rootScope, $location) {
                    $rootScope.$on("$routeChangeStart", function (event, next, current) {
                        if (!(next.templateUrl == "views/login.html")) {
                            $location.path("/login");
                        }
                    })
                })

Answer 7

假设用户登录到您的应用程序时，系统会生成一个auth令牌，其中包含表明用户已通过身份验证的数据。因此，由于它在页面呈现上执行的任何控制器，您只需要对您的auth令牌进行少量验证。如果不存在此令牌，则重定向到登录页面。我认为，你不需要阻止任何后退按钮。

// First lines inside your controller.
if (!$tokenManager.getToken()) { // Get token.
    $location.path('/login');
}

流程为：

1. 用户转到login.html并输入其凭据（用户/密码）
2. 系统验证凭据并生成身份验证令牌
3. 系统保存令牌，比如：tokenManager.save（）
4. 用户现在位于welcome.html页面
5. 用户从系统注销
6. 系统删除auth令牌，比如说：tokenManager.clean（）
7. 用户按下后退按钮浏览器按钮
8. 系统试图进入welcome.html页面，但它自己的控制器进行了验证
9. 用户被重定向到login.html