私は、yeoman、grunt、bower を使用して作成した AngularJS アプリケーションを持っています。
認証をチェックするコントローラーを備えたログイン ページがあります。資格情報が正しい場合は、ホームページにリダイレクトします。
アプリ
'use strict';
//Define Routing for app
angular.module('myApp', []).config(['$routeProvider', '$locationProvider',
function($routeProvider,$locationProvider) {
$routeProvider
.when('/login', {
templateUrl: 'login.html',
controller: 'LoginController'
})
.when('/register', {
templateUrl: 'register.html',
controller: 'RegisterController'
})
.when('/forgotPassword', {
templateUrl: 'forgotpassword.html',
controller: 'forgotController'
})
.when('/home', {
templateUrl: 'views/home.html',
controller: 'homeController'
})
.otherwise({
redirectTo: '/login'
});
// $locationProvider.html5Mode(true); //Remove the '#' from URL.
}]);
angular.module('myApp').factory("page", function($rootScope){
var page={};
var user={};
page.setPage=function(title,bodyClass){
$rootScope.pageTitle = title;
$rootScope.bodylayout=bodyClass;
};
page.setUser=function(user){
$rootScope.user=user;
}
return page;
});
ログインコントローラ.js
'use strict';
angular.module('myApp').controller('LoginController', function($scope, $location, $window,page) {
page.setPage("Login","login-layout");
$scope.user = {};
$scope.loginUser=function()
{
var username=$scope.user.name;
var password=$scope.user.password;
if(username=="admin" && password=="admin123")
{
page.setUser($scope.user);
$location.path( "/home" );
}
else
{
$scope.message="Error";
$scope.messagecolor="alert alert-danger";
}
}
});
私のホームページには
<span class="user-info">
<small>Welcome,</small>
{{user.name}}
</span>
<span class="logout"><a href="" ng-click="logoutUser()">Logout</a></span>
ではloginController、ログイン情報をチェックし、成功した場合はサービスファクトリにユーザーオブジェクトを設定します。これが正しいかどうかはわかりません。
必要なのは、ユーザーがログインしたときに、ユーザー オブジェクトに何らかの値を設定し、他のすべてのページでその値を取得できるようにすることです。
ルートの変更が発生するたびに、コントローラはユーザーがログインしているかどうかを確認する必要があります。ログインしていない場合は、ログイン ページにリダイレクトする必要があります。また、ユーザーがすでにログインしていてページに戻ってきた場合は、ホームページに移動する必要があります。コントローラは、すべてのルートの資格情報も確認する必要があります。
ng-cookies については聞いたことがありますが、使い方がわかりません。
私が見た例の多くはあまり明確ではなく、何らかのアクセス ロールなどを使用しています。私はそれを望んでいません。ログイン フィルターだけが必要です。誰かアイデアをくれませんか?
ベストアンサー1
私のソリューションは 3 つの部分に分かれています。ユーザーの状態はサービスに保存され、run メソッドではルートの変更を監視して、ユーザーが要求されたページへのアクセスを許可されているかどうかを確認し、メイン コントローラーではユーザーの状態が変化するかどうかを監視します。
app.run(['$rootScope', '$location', 'Auth', function ($rootScope, $location, Auth) {
$rootScope.$on('$routeChangeStart', function (event) {
if (!Auth.isLoggedIn()) {
console.log('DENY');
event.preventDefault();
$location.path('/login');
}
else {
console.log('ALLOW');
$location.path('/home');
}
});
}]);
Authユーザー オブジェクトを処理し、ユーザーがログインしているかどうかを確認するメソッドを持つサービス ( という名前を付けます) を作成する必要があります。
サービス:
.factory('Auth', function(){
var user;
return{
setUser : function(aUser){
user = aUser;
},
isLoggedIn : function(){
return(user)? user : false;
}
}
})
からapp.run、イベントをリッスンする必要があります$routeChangeStart。ルートが変更されると、ユーザーがログインしているかどうかが確認されます (メソッドがisLoggedInそれを処理する必要があります)。ユーザーがログインしていない場合は要求されたルートが読み込まれず、ユーザーを適切なページ (この場合はログイン) にリダイレクトします。
loginControllerログインを処理するには、ログイン ページでこれを使用する必要があります。Authサービスと対話し、ユーザーがログインしているかどうかを設定するだけです。
ログインコントローラ:
.controller('loginCtrl', [ '$scope', 'Auth', function ($scope, Auth) {
//submit
$scope.login = function () {
// Ask to the server, do your job and THEN set the user
Auth.setUser(user); //Update the state of the user in the app
};
}])
メイン コントローラーから、ユーザーの状態が変わったかどうかをリッスンし、リダイレクトで反応することができます。
.controller('mainCtrl', ['$scope', 'Auth', '$location', function ($scope, Auth, $location) {
$scope.$watch(Auth.isLoggedIn, function (value, oldValue) {
if(!value && oldValue) {
console.log("Disconnect");
$location.path('/login');
}
if(value) {
console.log("Connect");
//Do something when the user is connected
}
}, true);