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

Question

我有一个 angularjs 网络应用程序。我试图不允许用户在注销后使用浏览器后退按钮转到上一页。我希望向用户显示“请登录以继续”之类的消息。我无法得到任何想法。请建议。

Answer 1

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

1. use $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

您可以实现类似的东西来对不同的内容进行访问控制。请注意，您还必须保护您的后端。

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

在我的一个较旧的项目中，我使用它来创建“到上一页”按钮。

Answer 4

prevent default 和 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 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

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

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

流程将是：

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

Answer 7

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