AngularJS Kann den Authentifizierungsstatus nicht anzeigen

Question

Ich bin AngularJS sehr neu, also entschuldige mich zuerst!

Ich habe eine Angular App eine REST-API auf dem Back-End verwendet zur Anmeldung der Benutzer in/out

Jedoch habe ich den Benutzer in Status auf dem Angular-Frontend angemeldet zeigen versuche, aber nicht viel Erfolg .

Meine Benutzer sind und mittels "authService.js" protokolliert:

app.factory('authService', ['$http', '$q', 'localStorageService', function ($http, $q, localStorageService) { 

    // dec the home of the API 
    var serviceBase = '<domain>' // remember to change this to the current domain that the API is being hosted! 
    var authServiceFactory = {}; 

    // Local Authentication Data 
    var _authentication = { 
     isAuth: false, 
     userName: "" 
    }; 

    // Attempt to log in the user here 
    var _login = function (loginData) { 
     // This will be the body data of the login requesst 
     var data = "grant_type=password&username=" + loginData.userName + "&password=" + loginData.password; 
     var deferred = $q.defer(); // This gets the async data (AngularJS Call) 

     // Send a post request to the /token endpoint to request a login 
     $http.post(serviceBase + 'token', data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).success(
      function (response) { 
       // If the response was a 200 Success, then the user can be logged in locally 
       // Store the auth token 
       localStorageService.set('authorizationData', { token: response.access_token, userName: loginData.userName }); 
       // set local client data 
       _authentication.isAuth = true; 
       _authentication.userName = loginData.userName; 
       // Return the promise 
       deferred.resolve(response); 
      }).error(function (err, status) { 
       // Response from the HTTP was bad, i.e. not 200 
       // flush the user and reject thee promise 
       _logOut(); 
       deferred.reject(err); 
      }); 
     return deferred.promise; // return the promise 
    }; 

    // Remove the token from local storage 
    var _logOut = function() { 
     localStorageService.remove('authorizationData'); 
     _authentication.isAuth = false; 
     _authentication.userName = ""; 
    }; 

    // This is run at start. Tries to get the autherizationData and if it is there then 
    // the user is considered logged in 
    var _fillAuthData = function() { 
     var authData = localStorageService.get('authorizationData'); 
     if (authData) { 
      _authentication.isAuth = true; 
      _authentication.userName = authData.userName; 
     } 
    } 

    // Assign all the attributs of the service facotry 
    authServiceFactory.saveRegistration = _saveRegistration; 
    authServiceFactory.login = _login; 
    authServiceFactory.logOut = _logOut; 
    authServiceFactory.fillAuthData = _fillAuthData; 
    authServiceFactory.authentication = _authentication; 

    console.log("Auth at end of factory:"); 
    console.log(_authentication.isAuth); 

    // Return this object 
    return authServiceFactory; 
}]); 

So sollte diese Fabrik ein authServiceFactory Objekt erzeugen. Das Objekt authServiceFactory.authentication enthält die Daten, die ich dem Benutzer vorlegen muss, insbesondere .isAuth. Von hier aus würde ich in der Lage sein, Links zu verstecken, zeigen Sie den Benutzernamen für den Benutzer etc ...

In meinem Haupt App.js Datei ich habe:

var app = angular.module('AngularAuthApp', ['ngRoute', 'LocalStorageModule', 'angular-loading-bar']); 

app.config(function ($routeProvider) { 

    // Declaire routes... 
    $routeProvider.when("/home", { 
     controller: "homeController", 
     templateUrl: "/app/views/home.html" 
    }); 

    $routeProvider.when("/login", { 
     controller: "loginController", 
     templateUrl: "/app/views/login.html" 
    }); 

    $routeProvider.when("/signup", { 
     controller: "signupController", 
     templateUrl: "/app/views/signup.html" 
    }); 

    // redirect the user if they try to access anything else 
    $routeProvider.otherwise({ redirectTo: "/home" }); 
}); 

// On the app running run the authService to get auth data 
app.run(['authService', function (authService) { 
    authService.fillAuthData(); 
}]); 

// Set the application config 
// Any http request push it though the authInterceptorService 
app.config(function ($httpProvider) { 
    $httpProvider.interceptors.push('authInterceptorService'); 
}); 

Hinweis app.run werden die aktuellen Authentifizierungsdaten von sammeln die Fabrik.

Und in meinem Haupt-Single-seitiges HTML-Dokument Ich habe:

<!DOCTYPE html> 
<html data-ng-app="AngularAuthApp"> 
<head> 
    <meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible" /> 
    <link href="content/css/bootstrap.min.css" rel="stylesheet" /> 
    <link href="content/css/loading-bar.min.css" rel="stylesheet" /> 
    <link href="content/css/site.css" rel="stylesheet" /> 
    <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script> 
    <script src="scripts/bootstrap.min.js"></script> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 
</head> 
<body> 
    <div id="wrapper"> 
     <div id="sidebar-wrapper"> 
      <ul class="sidebar-nav"> 
       <li ng-hide="!authentication.isAuth"><a href="#/chargers">Welcome {{authentication.userName}}</a></li> 
       <li ng-hide="!authentication.isAuth"><a href="" data-ng-click="logOut()">Logout</a></li> 
       <li ng-hide="authentication.isAuth"><a href="#/login"><span class="glyphicon glyphicon-user"></span> Login</a></li> 
       <li ng-hide="authentication.isAuth"><a href="#/signup"><span class="glyphicon glyphicon-log-in"></span> Sign Up</a></li> 
      </ul> 
     </div> 
    </div> ... 

Meine Benutzer ohne Probleme anmelden können! und der Status ändert sich, was ich mit dem Chrome-Debugger gefunden habe. Allerdings kann ich die Ergebnisse nicht über das HTML wiedergeben. Die Listenelemente werden NICHT angezeigt, wenn sich ein Benutzer anmeldet. Das Hinzufügen von {{authentication.isAuth}} zu meiner HTML-Seite zeigt nichts.

Wie kann ich die Links verbergen/anzeigen und visuell darstellen, dass der Benutzer gerade angemeldet ist?

Answer 1

Haben Sie ein $ rootScope Variablenflag in Ihrer AuthFactory und aktualisieren Sie es nach der erfolgreichen Anmeldung.

$rootScope.isAuthenticated = false; // Not authenticated 
function login(){ 
    $http.post('RESTcalls').then(function(data){ 
     $rootScope.isAuthenticated = true; // Authenticated 
    }) 
}