Question

我想限制并重定向访问我的角应用中的某些路线。我意识到还有其他与此类似的问题，但由于角度和火力基础不断发展，一些早期解决方案不再有效，我希望得到最简单的解决方案，因为我目前的目标不是制作生产应用，而是适用的应用程序。

我可以登录并注销，每次登录时我都会将一个rootcope变量设置为true，每次我注销时都会将该变量设置为false。鉴于此，如何在用户未登录时限制我的路由并重定向到登录页面？

angular
  .module('angularappApp', [
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'firebase'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .when('/chat', {
          templateUrl: 'views/chat.html',
          controller: 'ChatCtrl'
      })
      .when('/login', {
          templateUrl: 'views/login.html',
          controller: 'LoginCtrl'
      })
      .when('/register', {
          templateUrl: 'views/register.html',
          controller: 'RegisterCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl',
        controllerAs: 'about'
      })
      .when('/logout', {
          template: 'Loging out...',
          controller: 'LogoutCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  }).constant('FBURL', 'https://dazzling-inferno-7746.firebaseio.com/');

这是我的app.js文件。

Answer 1

在您的应用中实施此类功能的最常用方法是观看页面更改并在条件失败时取消转换。

在您的示例中，您可以观看路线更改并检查$rootScope是否具有特定属性true或false。

  $rootScope.$on('$locationChangeStart', function(event, next, current) {
    // check if user is login if not then prevent default action
    // and redirect user to login page
    if(!$rootScope.isLogin){
      event.preventDefault();
      $location.path('login');
    }
  });

我建议您将此代码块放在运行块或至少配置块中，因为它们是第一个在angularjs应用程序中开始工作的东西......

并强烈建议您使用ui.router而非默认路由，因为它具有更多功能，而不是默认路由...

限制特定页面

如果你想限制一个特定的页面你可以在它的定义上添加一个自定义属性并检查它是否通过所有条件然后给它一个去...

.when('/chat', {
      templateUrl: 'views/chat.html',
      controller: 'ChatCtrl',
      // add a custom property for checking at route changes
      requireLogin: true
  })

然后在你的事件块中检查它

  $rootScope.$on('$locationChangeStart', function(event, next, current) {
    // get next route
    var nextRoute = $route.routes[$location.path()];
    // check if next page requires login then
    // check if user is login if not then prevent default action
    // and redirect user to login page
    if(nextRoute.requireLogin && !$rootScope.isLogin){
      event.preventDefault();
      $location.path('login');
    }
  });

基于角度应用程序中的布尔值限制和重定向

1 个答案: