不能在Ionic中禁用后退按钮(历史记录,缓存...)

时间:2016-02-19 05:09:18

标签: ionic-framework ionic-view

我有一个应用程序,其中包含用户需要将您的凭据登录的登录视图。

这是我的index.html:

<!DOCTYPE html>
<html ng-app="starter">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Services for Partners</title>

    <link href="lib/ionic/css/ionicons.min.css" rel="stylesheet">
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's css and js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/routes.js"></script>
    <script src="js/services.js"></script>

    <link href="css/app.css" rel="stylesheet">

  </head>
  <body>
    <div>
        <ion-nav-view animation="slide-right-left" cache-view="false"></ion-nav-view>
    </div>
    <div class="bar bar-footer bar-dark">
        <div>copyright</div>
    </div>    
  </body>
</html>

在我的index.html中,我使用属性cache-view =“false”。

用户登录后,他将重定向到主视图。

这是我家庭观点的一部分:

<ion-view title="home" ng-controller="homeCtrl">
    <div class="bar bar-header bar-dark">
        <button class="button button-icon icon ion-gear-b"></button>
        <button class="button button-icon icon ion-android-close" ng-click="closeApp()"></button>
    </div>
    <ion-content overflow-scroll="true" padding="true" scroll="true" class="has-header has-footer">
        <!--<div class="spacer" style="width: 300px; height: 15px;"></div>-->
        <div style="text-align:center;">
            <img src="img/logo.png" class="logo-pequena">
        </div>        
        <div>

在主视图中,我有一个注销按钮,调用方法closeApp()。

这是我的家庭控制器,我的closeApp()方法:

starter.controller('homeCtrl', ['$scope', '$state', '$ionicHistory', function($scope, $state, $ionicHistory) {

    $scope.closeApp = function() {

        //Remove todos as infos do usuário do localStorage
        localStorage.clear();

        $ionicHistory.clearHistory();
        $ionicHistory.clearCache();
        $ionicHistory.nextViewOptions({
            historyRoot: true,
            disableAnimate: true,
            disableBack: true
        });

        $state.go('login');
    }

}]);

在这里,我们可以看到我正在使用几个命令来禁用离子历史记录。

下面是我的services.js文件:

var starter = angular.module('starter.services', []);

starter.run(function($ionicPlatform,$state,$ionicHistory){

    $ionicPlatform.registerBackButtonAction(function (event) {
        if($state.current.name=="home"){
            navigator.app.exitApp();
        }
        else {
            $ionicHistory.backHistory();
        }
    }, 100);
});

这是我的route.js文件:

var starter = angular.module('starter.routes', []);

//Rotas do app
starter.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', 
    function($stateProvider, $urlRouterProvider, $locationProvider) {

  $stateProvider //.state(...).state(...).state(...)

    //Login
    .state('login', {
      url: '/login',
      cache: false,
      templateUrl: 'templates/login.html',
      controller: 'loginCtrl'
    })

    //Novo Usuário
    .state('newuser', {
      url: '/newuser',
      cache: false,
      templateUrl: 'templates/newuser.html',
      controller: 'newUserCtrl'
    })

    //Esqueceu a senha
    .state('forgotpwd', {
      url: '/forgotpwd',
      cache: false,
      templateUrl: 'templates/forgotpwd.html',
      controller: 'forgotPwdCtrl'
    })

    //Sobre
    .state('about', {
      url: '/about',
      cache: false,
      templateUrl: 'templates/about.html',
      controller: 'aboutCtrl'
    })

    //Home
    .state('home', {
      url: '/home',
      cache: false,
      templateUrl: 'templates/home.html',
      controller: 'homeCtrl'
    });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/login');

}]);

这里我已将所有路由配置为不缓存任何视图。

在所有这些事情之后没有任何反应。我的应用程序仍允许我单击后退按钮(不是硬件按钮,而是软件按钮)。我在我的Sony Z3智能手机上运行的“Ionic View App”上预览我的应用程序。

因此,用户无需登录即可返回主页。

如果用户在登录视图中单击后退按钮,我想退出应用程序。但是在完成所有这些配置之后,我仍然遇到了这个问题。

我需要做什么?

我已经更新了cordova和ionic。这是一个错误还是可以解决这个问题?

感谢。

1 个答案:

答案 0 :(得分:0)

你为什么不试试这个

///code to skip login page if logged in
.run(function ($rootScope, $state) {
    // Check login session
    $rootScope.$on('$stateChangeStart', function (event, next, current) {

        if(condition to check that you are logged in..maybe store token in localstorage and heck){
           if (next.name === "login") {
              event.preventDefault();
              $state.go('home');
            }

        }


    });
})

用于后退按钮操作

 .run(['$rootScope', '$ionicPlatform','$state', '$ionicHistory',
        function($rootScope, $ionicPlatform,$state, $ionicHistory){
      $ionicPlatform.registerBackButtonAction(function(e){

     if ($state.current.name == 'home') {
      ionic.Platform.exitApp();

    }
    else if ($ionicHistory.backView() ) {
      $ionicHistory.goBack();
    }
    e.preventDefault();
    return false;
  },101);

}])