angular js应用程序中的后退按钮行为

back button behavior in angular js application

本文关键字:按钮 js 应用程序 angular      更新时间:2023-09-26

我有一个用angularJS编写的SPA应用程序。该应用程序由三个视图组成:登录视图、主视图和注销视图。

  • myapp/#/登录
  • myapp/#/主要
  • myapp/#/注销

my route provider:

function Router($routeProvider) {
    $routeProvider
        .when('/login', {
            templateUrl: 'app/components/login/login.tmpl.html',
            controller: 'login.ctrl',
            controllerAs: 'vm'
        })
        .when('/main', {
            templateUrl: 'app/components/dashboard/main.tmpl.html',
            controller: 'dashboard.ctrl',
            controllerAs: 'vm'
        })
        .when('/logout', {
            templateUrl: 'app/components/logout/logout.tmpl.html',
            controller: 'logout.ctrl',
            controllerAs: 'vm'
        })
        .otherwise({
            redirectTo: '/login'
        });
}

用例:1)用户登录。2)用户在主视图中看到内容3)用户退出。4)用户被重定向到注销视图进行确认5)用户被重定向到登录视图

如果我在步骤5之后按后退浏览器按钮,我将被重定向到主视图。是否有一种方法来改变后退按钮的行为,当我在登录视图?我相信这很简单,如果问题重复,我很抱歉。感谢您的时间和回复!

请参阅工作示例:http://plnkr.co/edit/46O0znC5HFDE4cYXSm5h?p=preview

登录功能中cookies中存储的数据如下,

$cookies.userinfo = {
    'id': 1,
    'name': 'pqr'
};

并在登出时删除该数据-

delete $cookies.userinfo;

然后检查'angular.isDefined($cookies.userinfo)' (userinfo是在存储数据时给出的cookie名称),如果找到,然后将其重定向到登录后想要看到的页面。即

app.run(function ($cookies) {
      $rootScope.$on("$routeChangeStart", function () {
        if (angular.isDefined($cookies.userinfo)) {
            $location.path("/pathname");
        }
      });
});