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

Question

我有一个 angularjs 网络应用程序。我试图不允许用户在注销后使用浏览器后退按钮转到上一页。我希望向用户显示像 "Please login to continue" 这样的消息。我无法得到任何想法。请提出建议。

Answer 1

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

使用$stateChangeStart，每当状态改变时调用此方法，查找令牌，如果找不到令牌，则将用户重定向到登录。
use resolve：resolve 将在相应状态发生路由之前得到调用，因此在 resolve

方法一：

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

方法二：

$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

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

在为 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 3

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

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

在我的一个旧项目中，我用它创建了一个 "to previous page" 按钮。

Answer 4

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 5

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

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

流程为：

用户转到 login.html 并输入其凭据 (user/password)
系统验证凭据并生成授权令牌
系统保存令牌让我们说：tokenManager.save();
用户现在在 welcome.html 页面。
用户退出系统。
系统删除授权令牌，比方说：tokenManager.clean();
用户按下后退按钮浏览器按钮。
系统尝试进入welcome.html页面，但它自己的控制器有验证。
用户被重定向到 login.html

Answer 6

防止默认和 window.history.forward() 的组合解决了这个问题。

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

想法是 event.preventDefault() 删除历史堆栈。因此，如果我们从 page1 -> page2 -> page3 进行，preventDefault 仅在到达主页时才起作用。需要 forward() 才能继续重定向到同一页面。

Answer 7

以下代码禁用整个应用程序的浏览器后退按钮：

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

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

How to disable users from accessing previous page by browser back button after logout in angularjs application?

javascript

angularjs

angularjs-authentication