Question

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

Answer 1

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

使用$stateChangeStart，只要状态发生变化，此方法就会调用，查找令牌，如果找不到令牌，则将用户重定向到登录。
use 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        
});

<强>方法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

在我的一个旧项目中，我用它来创建一个＆＃34;到上一页＆＃34;按钮。

Answer 4

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

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

想法是event.preventDefault（）删除历史堆栈。所以如果我们从第1页开始 - >第2页 - ＆gt; 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进行litle验证。如果此令牌不存在，则重定向到登录页面。我想，你不需要阻止任何后退按钮。

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

流程将是：

用户转到login.html并输入其凭据（用户/密码）
系统验证凭据并生成身份验证令牌
系统使用let say：tokenManager.save（）;
用户现在位于welcome.html页面。
用户从系统注销。
系统删除auth-token，让我们说：tokenManager.clean（）;
用户按后退按钮浏览器按钮。
系统尝试进入welcome.html页面，但它自己的控制器已经过验证。
用户被重定向到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");
                        }
                    })
                })

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

7 个答案: