在 ui-router 中停止浏览器 - angularjs [英] Stop browser back in ui-router - angularjs

问题描述

一旦我登录应用程序，如果我在浏览器中单击后退按钮，它不应再次返回登录页面(此时后退按钮应被禁用).

Once i logged into application,if i click back button in browser it should not go back to login page again(Back button should be disable at that time).

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

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

From login page,im getting into app.home state,once i clicked back button it should not go for login page(Browser back button should be disable).

提前致谢.

推荐答案

我认为你必须处理一些基本的路由和存储实现.

I think that you have to deal with some basic routes and storage implementation.

以此结构作为身份验证的简单示例:我们有主页 URL，默认的，我们有一个登录页面和一个秘密页面.

Take this structure as an easy example of an authentication: we have the home URL, the default one, we have a login page and a secret page.

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

秘密页面仅对经过身份验证的用户可用，因此您在状态本身中放置一个参数以指示此页面需要某种身份验证.

The secret page is available only for authenticated user, so you put a parameter in the state itself to indicate that this page needs some authentication.

为了处理身份验证过程，如重定向，您可以创建一个运行函数，该函数将有一个事件，监听状态变化.

To deal with the authentication process, like the redirect, you can create a run function which will have an event, listening to state changing.

如果您将到达需要身份验证的页面，您将检查该页面并将用户重定向到登录页面.

If you will reach a page that needs authentication, you will check that and redirect the user to the login page.

如果用户已经登录并尝试手动转到登录页面，您会将他重定向到主页，可能会带有反馈消息.

If the user is already logged in and try to go manually to the login page, you will redirect him to the home page maybe with a feedback message.

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

登录控制器在这里非常简单，但是您可以做任何您想做的事情来提供身份验证并保存您需要的所有参数

The login controller will be quite easy here, but you can do whatever you want to provide an authentication and save all parameters that you need

    // 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！