Yeoman Angular Fullstack - 如何保护路由？

Question

我用生成器创建了一条新路由 'Rooms'，并在管理路由上为我的 $stateProvider 建模

.state('admin', {
    url: '/admin',
    templateUrl: 'app/admin/admin.html',
    controller: 'AdminController',
    controllerAs: 'admin',
    authenticate: 'admin'
  });

VS

$stateProvider
  .state('rooms', {
    url: '/rooms',
    templateUrl: 'app/rooms/rooms.html',
    controller: 'RoomsCtrl',
    controllerAs: 'rooms',
    authenticate: 'admin'
  });

但是我的路由在没有认证的情况下还是出现了！

我想我遗漏了一些确保安全的东西，尽管我无法理解是什么！

有人可以帮忙吗？

谢谢

Answer 1

检查您是否在 app.js 中定义并调用了拦截器服务工厂，如下所示：

    .config(function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
    $urlRouterProvider
      .otherwise('/');

    $locationProvider.html5Mode(true);
    $httpProvider.interceptors.push('authInterceptor');
  })

  .factory('authInterceptor', function ($rootScope, $q, $cookieStore, $location) {
    return {
      // Add authorization token to headers
      request: function (config) {
        config.headers = config.headers || {};
        if ($cookieStore.get('token')) {
          config.headers.Authorization = 'Bearer ' + $cookieStore.get('token');
        }
        return config;
      },

      // Intercept 401s and redirect you to login
      responseError: function(response) {
        if(response.status === 401) {
          $location.path('/login');
          // remove any stale tokens
          $cookieStore.remove('token');
          return $q.reject(response);
        }
        else {
          return $q.reject(response);
        }
      }
    };
  })

  .run(function ($rootScope, $location, Auth) {
    // Redirect to login if route requires auth and you're not logged in
    $rootScope.$on('$stateChangeStart', function (event, next) {
      Auth.isLoggedInAsync(function(loggedIn) {
        if (next.authenticate && !loggedIn) {
          event.preventDefault();
          $location.path('/login');
        }
      });
    });
  });

Answer 2

你的控制器应该是这样的：

     angular.module('auth8App').controller('RoomsCtrl', function ($scope,Auth,$location) {

               //check if the user is logged-in
                Auth.isLoggedInAsync(function(loggedIn) {
                        if (!loggedIn) {    
                       //if the user is not logged  Redirect to login
                          event.preventDefault();
                          $location.path('/login');
                        }
                      });
                    $scope.message = 'Hello';
                });

Yeoman Angular Fullstack - 如何保护路由？

Yeoman Angular Fullstack - how to secure routes?

angularjs

angular-fullstack