在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

您可以實現類似於對不同內容進行訪問控制的功能。 請注意，您還必須保護后端。

在定義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/zh-CN/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（）刪除歷史記錄堆棧。 因此，如果我們從第1頁->第2頁->第3頁開始，則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令牌放置一個小驗證即可。 如果此令牌不存在，則重定向到登錄頁面。 我認為，您不需要阻止任何后退按鈕。

// 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

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