在ui-router中停止瀏覽器-angularjs

Question

登錄應用程序后，如果在瀏覽器中單擊“后退”按鈕，則不應再次返回登錄頁面（當時應禁用“后退”按鈕）。

$stateProvider(function('$stateProvider'){
   $stateProvider
   .state('login',{})
   .state('app.home',{})
   .state('app.contact',{});
});

從登錄頁面開始，即進入app.home狀態，單擊后退按鈕就不應該進入登錄頁面（瀏覽器后退按鈕應該被禁用）。

提前致謝。

Answer 1

我認為您必須處理一些基本路線和存儲實現。

以此結構作為身份驗證的簡單示例：我們有主URL，默認URL，有登錄頁面和秘密頁面。

    // Route configuration
    var Config = function($stateProvider, $urlRouterProvider){

        $stateProvider

        .state('home', {
            url : '/',
            templateUrl : 'home.html'
        })
        .state('login', {
            url : '/login',
            controller : 'LoginCtrl',
            templateUrl : 'login.html'
        })
        .state('secret', {
            url : '/secret',
            templateUrl : 'secret.html',
            authenticate : true
        })

        $urlRouterProvider.otherwise("/");

    };

    // Dependencie injection
    Config.$inject = [
        '$stateProvider',
        '$urlRouterProvider'
    ];

    // Module declaration
    app.config(Config);

秘密頁面僅對經過身份驗證的用戶可用，因此您將參數放在狀態本身中以指示該頁面需要某種身份驗證。

為了處理身份驗證過程，例如重定向，您可以創建一個運行函數，該函數將具有一個事件，偵聽狀態更改。

如果您到達需要身份驗證的頁面，則將進行檢查並將用戶重定向到登錄頁面。

如果用戶已經登錄並嘗試手動進入登錄頁面，則您可能會通過一條反饋消息將其重定向到主頁。

    // Initialize the application
    var Init = function($rootScope, $state){

        $rootScope.$on('$stateChangeStart', function (event, toState, toParams) {

            var isLogged = localStorage.getItem('auth');

            if(toState.authenticate && isLogged === null){

                event.preventDefault();

                // Set the url where you will redirect the user after the authentication
                $rootScope.returnToState = toState.name;

                // Redirect to the login page
                $state.go('login');    

            } 

            if(isLogged && toState.name === 'login'){

                event.preventDefault();

                // Redirect to the homepage if the page is the login and
                // you are already logged in
                $state.go('home');

            }

        });

    };

    // Dependencie injection
    Init.$inject = [
        '$rootScope',
        '$state'
    ];

    // Module declaration
    app.run(Init);

登錄控制器在這里非常簡單，但是您可以執行任何想要提供身份驗證的操作，並保存所需的所有參數。

    // Login Controller
    var LoginCtrl = function($scope, $rootScope, $state){

        // Share methods
        $scope.authenticate = function(){

            // Do whatever you want to validate credentials

            localStorage.setItem('auth', true);

            var redirectPath = angular.isUndefined($rootScope.returnToState) ? 'home' : $rootScope.returnToState;

            $state.go(redirectPath);

        };

    };

    // Dependencie injection
    LoginCtrl.$inject = [
        '$scope',
        '$rootScope',
        '$state'
    ];

    // Module declaration
    app.controller('LoginCtrl', LoginCtrl);