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

debugcn 发表于 Dev

贾凡

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

我可以登录和注销，并且每次登录时，都会将rootscope变量设置为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文件。

Poyraz Yilmaz

在您的应用中实现此类功能的最常见方法是观察页面更改并在条件失败时取消过渡。

在您的示例中，您可以查看路线更改并检查是否$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');
    }
  });

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。