Wie umleiten eines Benutzers in angular.js mithilfe von Access Token-Mechanismus?

Question

Dies ist der Prozessablauf:

1. Am vorderen Ende meldet sich der Benutzer durch die Bereitstellung Benutzernamen und Passwort ein.

2. Der Server antwortet dem Benutzer mit einem Token, wenn die Anmeldeinformationen korrekt sind.

3. Jetzt sollte der Benutzer auf die Homepage umgeleitet werden (PROBLEM HIER). Ich habe das Token in der Kopfzeile mit diesem Code festgelegt: $ http.defaults.headers.common ['X-Auth-Token'] = Token;

4. Auch wenn ich eine http.get Methode zu tun, ich bin ein "OK" Antwort bekommen

   $http({ method: 'GET', 
   
       url: '/home/', 
   
       headers: { 
        'X-Auth-Token': token 
       } 
   }).then(function successCallback(response) { 
       console.log(response.statusText); 
   } 
   

Nun ist das Problem, dass wenn ich $ window.location.href = "/ home" antwortet der Server mit "unauthorised token", da der Server bei jeder Anfrage immer einen Token im Header erwartet. Im Befehl window.location.href kann ich den Header nicht setzen.

Was ist eine Alternative, um den Benutzer auf die Homepage umzuleiten. Angenommen, der Server überprüft immer den Header für das Zugriffstoken.

Vielen Dank im Voraus !!!

Answer 1

AFAIK Wenn Sie eine HTTP-Weiterleitung verwenden, wie z. B. die Einstellung window.location.href, gibt es keine Möglichkeit für benutzerdefinierte Header. Das können Sie auch nicht, wenn Sie einen Formular-Post verwenden. Verwenden Sie stattdessen Cookies für diesen Zweck.

Ajax (XMLhttpRequest) ist möglicherweise der einzige, der das Setzen von benutzerdefinierten Headern unterstützt.

Wenn u nicht mit Winkeln Routing dagegen (aber dies zu tun kann eine gewisse Logik in js Code zu, das nur für authentifizierte Benutzer ausgesetzt werden soll), kann u ein resolve für resolveRedirectTo, in dem einen Ajax-Request machen hinzufügen zu überprüfen Authentifizierungsstatus bei jeder Änderung der Route.

EDIT

---

Für Winkel Routing verwenden, ist die grundlegende Denk Benutzer zu fragen, um Ajax-Anforderung mit benutzerdefinierten Header an den Server senden Sie zu überprüfen, ob er/sie berechtigt ist, die Seite zu besuchen. Überprüfen Sie den folgenden Code aus und this fiddle

app 
.config(['$routeProvider',function ($routeProvider) { 

    $routeProvider. 
    when('/home', { 
     templateUrl:"home.html" , 
     controller: 'MainController', 
     resolve:{ 
      isLogin:function($q, $http,$location) { 
       var deferred = $q.defer(); 
       //verify the user via an ajax request every time the user attempts to visit `/home` 
       //here since u have already set the custom headers for $http upon signing in, the next request will be with the header. 
       //the follow test url will return {isLogin:true} 
       $http({method: 'GET', url: 'http://echo.jsontest.com/isLogin/true'}) 
        .success(function(data) { 


         if(data.isLogin){ 
         deferred.resolve(data.isLogin); // no need to redirect 
         } 
         else{ 
         $location.path("/guest");// redirect to guest page if not authorized 
         deferred.reject(); 
         } 
        }) 
        .error(function(data){ 
        //error 
         $location.path("/guest"); 
         deferred.reject(); 
        }); 

       return deferred.promise; 
      } 
     } 
    }). 
    when("/guest",{ 
     templateUrl: "guest.html", 
     controller: 'GuestController', 
    }) 
    .otherwise({redirectTo:'/guest'}) 
}]);