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

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

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

使用

$stateChangeStart

，此方法在状态更改时调用，查找令牌，如果未找到令牌，将用户重定向到登录

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

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

方法2:

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

---

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

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

---

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

---

在我以前的一个项目中，我用它创建了一个“到上一页”按钮。

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

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

流程将是：

用户转到login.html并放入其凭据（用户/密码）

系统验证凭据并生成身份验证令牌

系统使用tokenManager.save（）保存令牌

用户现在处于welcome.html页面

用户从系统注销

系统删除身份验证令牌，比如：tokenManager.clean（）

用户按下后退按钮浏览按钮

系统尝试进入welcome.html页面，但它自己的控制器具有验证

用户被重定向到login.html

---

组合使用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（）来保持重定向到同一页面。

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

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

---

如果您使用ui.router，您可以将一些访问相关数据添加到您的状态。然后在状态更改之前在某处侦听事件。如果用户没有足够的权限访问资源，则可以显示登录对话框。并在成功登录后切换状态。您还可以添加http拦截器来控制api请求，并在需要时显示登录对话框。您如何在应用程序中处理身份验证？粘贴检查用户是否登录的代码。将这些方法放置在何处。在服务或登录控制器中。您应该将此方法放在app.js文件中。请详细说明您的答案，并添加有关您提供的解决方案的更多说明。上面的代码是禁用浏览器后退按钮，但它不允许我注册或忘记通过。i、 e甚至ng href链接也不起作用。