Authentifizierung: gezwungen, Seite zu aktualisieren, um autorisiert werden

Question

Ich verwende den Code von this blog, um ein Authentifizierungsmodul für meine eckige App zu machen.

Ich habe eine Testseite, die ein Login-Formular, eine Absenden-Schaltfläche und eine Schaltfläche "Profil" enthält, die eine eingeschränkte Route abfragen wird.

<div class="container-fluid" ng-controller="AuthCtrl as auth"> 
    <input type="text" ng-model="auth.user.username"> 
    <input type="text" ng-model="auth.user.password"> 
    <button ng-click="auth.login(auth.user)">LOGIN</button> 
    <button ng-click="auth.profile()">PROFILE</button> 
</div> 

Der eingeschränkte Weg, den ich nach der Anmeldung bin Abfrage ist wie folgt definiert:

const authenticate = expressJwt({ 
    secret: SECRET 
}); 
app.get('/me', authenticate, function(req, res) { 
    res.status(200).json(req.user); 
}); 

Die Login funktioniert gut. Ich erhalte ein Token, das ich in die Sitzung einlege. Wenn ich auf den Profilbutton klicke (Anfrage an/mich) bekomme ich einen nicht autorisierten Fehler.

Wenn ich die Seite aktualisiere und erneut auf Profil klicke, bekomme ich das erwartete Verhalten. (/ me gibt Benutzerdaten ohne Fehler zurück)

Wenn ich das Token danach manuell lösche, habe ich immer noch Zugriff auf/me, bis ich die Seite aktualisiere.

Das ist mein Service:

function loginService($http) { 
    this.login = function(user) { 
     return $http.post('/auth', user).then(
      function(response) { 
       return response.data; 
      }, 
      function(response) { 
       return response; 
      }); 
    }; 
    this.profile = function() { 
     return $http.get('/me').then(
      function(response) { 
       return response.data; 
      }, 
      function(response) { 
       return response; 
      }); 
    }; 
} 

angular 
    .module('app') 
    .service('loginService', loginService); 

Und das ist mein Controller mit dem httpProvider:

function AuthCtrl($window, $http, loginService) { 
    this.user = {username: "", password: ""}; 
    this.login = function(user) { 
     loginService.login(user).then(function(data) { 
      $window.sessionStorage.token = data.token; 
     }); 
    }; 
    this.profile = function() { 
     loginService.profile().then(function(data) { 
      console.log(data); 
     }); 
    }; 
} 

function config($httpProvider, $windowProvider) { 
    var window = $windowProvider.$get(); 
    if(window.sessionStorage.token) { 
     var token = window.sessionStorage.token; 
     $httpProvider.defaults.headers.common.Authorization = 'Bearer ' + token; 
    } 
}; 

angular 
    .module('app') 
    .config(config) 
    .controller('AuthCtrl', AuthCtrl); 

Könnte das Problem kommt aus den Token in session Speicher oder aus den http-Provider?

Schließlich werde ich die secure cookie method implementieren, aber ich möchte, dass diese gelöst, bevor Sie weiter gehen.

Answer 1

Ich fand schließlich heraus, dass es für den $httpProvider Code kam.

function config($httpProvider, $windowProvider) { 
    var window = $windowProvider.$get(); 
    if(window.sessionStorage.token) { 
     var token = window.sessionStorage.token; 
     $httpProvider.defaults.headers.common.Authorization = 'Bearer ' + token; 
    } 
}; 

Die Provider-Optionen wurden nur einmal während des Ladens der App gesetzt. Das erneute Laden der Seite würde den Konfigurationscode erneut ausführen und die -Bedingung wie erwartet eingeben.

Um diese Konfiguration dynamisch zu machen, ich hatte eine interceptor (Fabrik) wie so zu erstellen:

function config($httpProvider) { 
    $httpProvider.interceptors.push('authInterceptor'); 
}; 

function authInterceptor($rootScope, $q, $window) { 
    return { 
     request: function (config) { 
      config.headers = config.headers || {}; 
      if ($window.sessionStorage.token) { 
       config.headers.Authorization = 'Bearer ' + $window.sessionStorage.token; 
      } 
      return config; 
     }, 
     responseError: function (rejection) { 
      if (rejection.status === 401) { 
       console.log("not authorised"); 
      } 
      return $q.reject(rejection); 
     } 
    }; 
}; 

angular 
    .module('app') 
    .config(config) 
    .controller('AuthCtrl', AuthCtrl) 
    .factory('authInterceptor', authInterceptor);