如何使用AngularJS，Devise和UI路由器全局实现身份validation？

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

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

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

我不想在每个Angular控制器中都这样做，因为DRY。 所以我认为UI路由器可能是一个好地方。 我有点怀疑可能$ httpProvider.interceptors可能有用。

这是我得到了多远。 我可以检查用户是否经过身份validation并阻止加载页面。 但仅此而已。 我怎么会离开这里？ 我错过了哪些好的教程？

Stackoverflow上的这个问题也有类似的方向，但由于他们没有使用Devise，因此无法解决我的问题。

谢谢！

// 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(); } }) }); 

Answer 1

我写了一篇文章，基本上回答了这个问题（至少在高层次上），称为如何使用AngularJS和Ruby on Rails设置身份validation 。

如果要检查用户是否在任何特定路由上进行了身份validation，您可以（在Angular的标准路由器中，虽然我不知道ui-router）使用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(); }] } }) 

根路由是公共的，但/today需要身份validation。 也许这足以让你继续使用ui-router。 旁注：我应该更新我的文章以考虑ui-router（或Angular的新路由器），因为我不认为很多人使用常规的旧Angular路由器。

编辑 ：我记得这件事来自我的另一个项目。 这是CoffeeScript。 省略了不相关的代码。

“严格使用”

 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" 

希望那里发生的事情是不言而喻的。 这个项目使用ui-router，你可以从$stateChangeStart告诉你。