2016-05-12 12 views
1

私はAngularJSの新機能ですので、まず謝ります!AngularJS認証ステータスを表示できません

私は角度のフロントエンド上のユーザーのログオン状態でを表示しようとしているが、多くの成功を持っていないですが角度アプリが/アウトでユーザーをログに記録するバックエンドに

をREST APIを使用してい。私のユーザーは "authService.js" を使用して内外にログインしている

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; 
}]); 

ので、この工場では、オブジェクトauthServiceFactoryを生成する必要があります。 authServiceFactory.authenticationオブジェクトは、ユーザに提示するために必要なデータです。具体的には、.isAuthです。ここから私は、ユーザーなどにユーザー名を表示し、リンクを非表示にすることができるだろう...

私は私のメインのApp.jsファイルで:

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'); 
}); 

お知らせapp.runは、から現在の認証データを収集します工場。

そして、私が持っている私のメインのシングルページングされたHTML文書に:

<!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> ... 

私のユーザーが問題なくログインすることができます!クロムデバッガを使って見つけた状態が変化しています。しかし、私はHTMLを通して結果を反映することはできません。ユーザーがログインするとリスト項目が表示されません.HTMLページに{{authentication.isAuth}}を追加すると何も表示されません。

リンクを非表示にする方法と、ユーザーが現在ログインしていることを視覚的に表す方法はありますか?

答えて

0

AuthFactoryに$ rootScope変数フラグを設定し、ログインが成功した後でそれを更新します。

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

私はあなたがあなたのスクリプトでそれを定義する必要が定義されていない場合は$ rootScopeが定義されていないので、この方法は、残念ながら – Harvey

+0

に動作していない取得します。 – Vinay

+0

コントローラ/工場で$ rootScopeを使用する前に注入してください。 – Vinay

関連する問題