Question

登录应用程序后，如果我单击浏览器中的后退按钮，则不应再次返回登录页面（此时应禁用后退按钮）。

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

从登录页面，我进入app.home状态，一旦我点击后退按钮，它就不应该进入登录页面（浏览器后退按钮应该被禁用）。

提前致谢。

Answer 1

我认为您必须处理一些基本路线和存储实施。

将此结构作为身份验证的简单示例：我们有主页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);

在ui-router - angularjs中停止浏览器

1 个答案: