title: How to globally implement Authentication with AngularJS, Devise and UI Router?
body: <p>I'm quite new to Angular so this might be a newbie question.</p>
  
  <p>I'm trying to implement a simple task manager (just an exercise) with Rails as backend and Angular as frontend. So far I followed a tutorial and everything worked fine. </p>
  
  <p>Now I want to globally implement Authentication. That means: When a user is not registered and logged in, she should see a splash page or the login page. </p>
  
  <p>I don't want to do that in every single Angular controller, because DRY. So I figured the UI Router might be a good place. And I have a slight suspicion that maybe $httpProvider.interceptors might be useful.</p>
  
  <p>This is how far I got. I can check if a user is authenticated and prevent the page from loading. But nothing more. How would I go from here? Are there any good tutorials out there I missed?</p>
  
  <p><a href="https://stackoverflow.com/questions/22537311/angular-ui-router-login-authentication">This question</a> on Stackoverflow goes in a similar direction but doesn't solve my problem since they are not using Devise.</p>
  
  <p>Thanks!</p>
  
  <pre><code>// 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(); 
          }
    })
  });
  </code></pre>