javascript - angularjsアプリケーションでログアウトした後、ユーザーがブラウザの戻るボタンで前のページにアクセスできないようにする方法は?

Question

angularjs Web アプリケーションがあります。ユーザーがログアウト後にブラウザの戻るボタンを使用して前のページに移動できないようにしています。「続行するにはログインしてください」のようなメッセージをユーザーに表示したいと思います。私はアイデアを得ることができません。提案してください。

Answer 1

次の 2 つの方法を使用して、前のページへのアクセスを無効にすることができます。

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/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#Adding_and_modifying_history_entries

私の古いプロジェクトの 1 つで、これを使用して「前のページへ」ボタンを作成しました。