Javascript 如何使用AngularJS、Desive和UI路由器全局实现身份验证？

我对Angular很陌生，所以这可能是个新手问题

我试图实现一个简单的任务管理器（只是一个练习），Rails作为后端，Angular作为前端。到目前为止，我遵循了一个教程，一切都很好

现在我想全局实现身份验证。这意味着：当用户未注册和登录时，她应该看到启动页面或登录页面

我不想在每个角度控制器上都这样做，因为它是干的。所以我想UI路由器可能是个好地方。我有点怀疑$httpProvider.interceptors可能有用

这就是我走了多远。我可以检查用户是否经过身份验证，并阻止页面加载。但没别的了。我该怎么走？有没有我错过的好教程

在Stackoverflow上，情况与此类似，但并没有解决我的问题，因为他们没有使用Desive

谢谢

// app.js
var app = angular.module("TaskManager", ['ui.router', 'templates', 'Devise'])
.config([
    '$stateProvider',
    '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider){
        $stateProvider
            .state('home', {
                url: '/home',
                templateUrl: 'home/_home.html',
                controller: 'MainCtrl', 
                resolve: {
                    projectPromise: ['projects', function(projects) {
                        console.log($rootScope);
                        return projects.getAll();
                    }]
                }
            })
            .state('projects', {
                url: '/projects/{id}',
                templateUrl: 'projects/_projects.html',
                controller: 'ProjectsCtrl',
                resolve: {
                    project: ['$stateParams', 'projects', function($stateParams, projects) {
                        return projects.get($stateParams.id);
                    }]
                }
            })
            .state('login', {
                url: '/login',
                templateUrl: 'auth/_login.html',
                controller: 'AuthCtrl',
                onEnter: ['$state', 'Auth', function($state, Auth) {
                    Auth.currentUser().then(function() {
                        $state.go('home');
                    })
                }]
            })
            .state('register', {
                url: '/register',
                templateUrl: 'auth/_register.html',
                controller: 'AuthCtrl',
                onEnter: ['$state', 'Auth', function($state, Auth) {
                    Auth.currentUser().then(function() {
                        $state.go('home');
                    })
                }]
            });

        $urlRouterProvider.otherwise('home');
    }
]);
// run blocks
app.run(function($rootScope, Auth) {
  // you can inject any instance here
  $rootScope.$on('$stateChangeStart', 
    function(event, toState, toParams, fromState, fromParams){ 
        if(!Auth.isAuthenticated()) {
            // So the magic should probably happen here. But how do I implement this?
            // And how do I allow users to access the /login and /register page?
            event.preventDefault(); 
        }
  })
});

---

我写了一篇文章，基本上回答了这个问题（至少在高层次上），名为

如果您想检查用户是否在任何特定路由上经过身份验证，您可以（在Angular的标准路由器中，尽管我不知道ui路由器）使用

resolve

。以下是我的一个老项目的几条路线：

      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        isPublic: true
      })
      .when('/today', {
        templateUrl: 'views/announcements.html',
        controller: 'AnnouncementsCtrl',
        resolve: {
          auth: ['$auth', function($auth) {
            return $auth.validateUser();
          }]
        }
      })

根路由是公共的，但现在需要身份验证。也许这也足以让你继续使用ui路由器。旁注：我真的应该更新我的文章来说明ui路由器（或Angular的新路由器），因为我认为很多人不会使用普通的Angular路由器

编辑：我从另一个项目中记住了这件事。这是咖啡脚本。忽略不相关的代码

“严格使用”

---

希望那里发生的事情是不言而喻的。该项目确实使用ui路由器，正如您从

$stateChangeStart

中可以看出的那样，您提到的问题的可能重复不包括作为身份验证机制的设计。

angular.module("fooApp", [
  "ngAnimate"
  "ngCookies"
  "ngResource"
  "ngRoute"
  "ngSanitize"
  "ngTouch"
  "ui.router"
  "ng-token-auth"
])
.run ($rootScope, $auth, $location) ->
  $rootScope.$on "auth:login-success", -> $location.path "/"
  $rootScope.$on "auth:logout-success", -> $location.path "/sign-in"
  $rootScope.$on "$stateChangeStart", (event, next) ->
    $auth.validateUser().then (->
      if $location.path() == "/"
        $location.path "/file-uploads"
    ), ->
      if !next.isPublic
        $location.path "/sign-in"