この記事を基本的にまとめた github リポジトリを作成しました: https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec
ng-login Github リポジトリ
プランカー
できる限り詳しく説明するように努めます。皆さんの助けになれば幸いです。
(1) app.js:アプリ定義での認証定数の作成
var loginApp = angular.module('loginApp', ['ui.router', 'ui.bootstrap'])
/*Constants regarding user login defined here*/
.constant('USER_ROLES', {
all : '*',
admin : 'admin',
editor : 'editor',
guest : 'guest'
}).constant('AUTH_EVENTS', {
loginSuccess : 'auth-login-success',
loginFailed : 'auth-login-failed',
logoutSuccess : 'auth-logout-success',
sessionTimeout : 'auth-session-timeout',
notAuthenticated : 'auth-not-authenticated',
notAuthorized : 'auth-not-authorized'
})
(2) Auth サービス: auth.js サービスには、以下のすべての機能が実装されています。$http サービスは、認証手順のためにサーバーと通信するために使用されます。ユーザーが特定のアクションの実行を許可されている場合、承認に関する機能も含まれています。
angular.module('loginApp')
.factory('Auth', [ '$http', '$rootScope', '$window', 'Session', 'AUTH_EVENTS',
function($http, $rootScope, $window, Session, AUTH_EVENTS) {
authService.login() = [...]
authService.isAuthenticated() = [...]
authService.isAuthorized() = [...]
authService.logout() = [...]
return authService;
} ]);
(3) セッション:ユーザーデータを保持するためのシングルトン。ここでの実装はあなた次第です。
angular.module('loginApp').service('Session', function($rootScope, USER_ROLES) {
this.create = function(user) {
this.user = user;
this.userRole = user.userRole;
};
this.destroy = function() {
this.user = null;
this.userRole = null;
};
return this;
});
(4) 親コントローラー:これをアプリケーションの「メイン」機能と見なしてください。すべてのコントローラーはこのコントローラーから継承し、このアプリの認証のバックボーンです。
<body ng-controller="ParentController">
[...]
</body>
(5) アクセス制御:特定のルートでのアクセスを拒否するには、2 つの手順を実装する必要があります。
a) 以下に示すように、UI ルーターの $stateProvider サービスで、各ルートへのアクセスを許可されたロールのデータを追加します (同じことが ngRoute でも機能します)。
.config(function ($stateProvider, USER_ROLES) {
$stateProvider.state('dashboard', {
url: '/dashboard',
templateUrl: 'dashboard/index.html',
data: {
authorizedRoles: [USER_ROLES.admin, USER_ROLES.editor]
}
});
})
b) $rootScope.$on('$stateChangeStart') で、ユーザーが承認されていない場合に状態の変更を防ぐ関数を追加します。
$rootScope.$on('$stateChangeStart', function (event, next) {
var authorizedRoles = next.data.authorizedRoles;
if (!Auth.isAuthorized(authorizedRoles)) {
event.preventDefault();
if (Auth.isAuthenticated()) {
// user is not allowed
$rootScope.$broadcast(AUTH_EVENTS.notAuthorized);
} else {
// user is not logged in
$rootScope.$broadcast(AUTH_EVENTS.notAuthenticated);
}
}
});
(6) 認証インターセプター:これは実装されていますが、このコードのスコープではチェックできません。各 $http リクエストの後、このインターセプターはステータス コードをチェックし、以下のいずれかが返された場合、イベントをブロードキャストして、ユーザーに再度ログインを強制します。
angular.module('loginApp')
.factory('AuthInterceptor', [ '$rootScope', '$q', 'Session', 'AUTH_EVENTS',
function($rootScope, $q, Session, AUTH_EVENTS) {
return {
responseError : function(response) {
$rootScope.$broadcast({
401 : AUTH_EVENTS.notAuthenticated,
403 : AUTH_EVENTS.notAuthorized,
419 : AUTH_EVENTS.sessionTimeout,
440 : AUTH_EVENTS.sessionTimeout
}[response.status], response);
return $q.reject(response);
}
};
} ]);
PS 1回目の記事で述べたフォームデータ自動入力のバグは、directives.jsに含まれるディレクティブを追加することで簡単に回避できます。
PS2このコードは、ユーザーが簡単に微調整して、さまざまなルートを表示したり、表示されることを意図していないコンテンツを表示したりできます。ロジックはサーバー側で実装する必要があります。これは、ng-app で適切に表示する方法にすぎません。