私は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}}を追加すると何も表示されません。
リンクを非表示にする方法と、ユーザーが現在ログインしていることを視覚的に表す方法はありますか?
私はあなたがあなたのスクリプトでそれを定義する必要が定義されていない場合は$ rootScopeが定義されていないので、この方法は、残念ながら – Harvey
に動作していない取得します。 – Vinay
コントローラ/工場で$ rootScopeを使用する前に注入してください。 – Vinay