AngularJS 認証のメソッド_AngularJS

最も一般的な権限の設計は、RBAC ロールベースのアクセス制御です。基本的な考え方は、システム操作のためのさまざまな権限が特定のユーザーに直接付与されるのではなく、ユーザー セットと権限セットの間にロール セットが確立されるというものです。各役割は、対応する権限のセットに対応します。

ユーザーに適切な役割が割り当てられると、ユーザーはこの役割に対するすべての操作権限を持ちます。この利点は、ユーザーを作成するたびに権限を割り当てる必要がなく、対応するロールをユーザーに割り当てるだけで済むことです。さらに、ロールの権限の変更はユーザーの権限の変更よりもはるかに少ないです。これにより、ユーザー権限の管理が簡素化され、システムのオーバーヘッドが軽減されます。

Angular で構築されたシングルページ アプリケーションでは、このようなアーキテクチャを実装するために追加の作業を行う必要があります。プロジェクト全体に関して、フロントエンド エンジニアが対処する必要がある箇所が 3 か所ほどあります。

1. UI 処理 (ユーザーが持つ権限に基づいてページ上の一部のコンテンツが表示されるかどうかを決定します)

2. ルーティング処理(アクセス権限のないURLにアクセスした場合、エラーページへジャンプ)

3. HTTP リクエストの処理 (データリクエストを送信すると、返されたステータスが 401 または 403 の場合、通常はエラー ページにリダイレクトされます)

クライアントでの認証に AngularJS を使用する場合は、サービス を使用することをお勧めします。サービスはシングルトンであり、すべてのビュー、コントローラー、ディレクティブ、フィルター、その他のサービスで簡単に使用できるためです。グローバル変数を公開せずにデータを保存でき、カプセル化も保証されます。

簡単な例:

services.factory('UserService', [function() { 
var sdo = { 
isLogged: false, 
username: '' 
}; 
return sdo; 
}]);

AngularJS でのサービスの使用は、次のような依存関係宣言を通じて行われます。

var controllers = angular.module('myApp.controllers', []);
/* ... */
controllers.controller('loginController', ['$scope', '$http', 'UserService', function(scope, $http, User) {
}]);

このloginControllerでは、サーバーに対してユーザーのIDを認証するためのログイン関数を定義できます:

scope.login = function() { 
var config = { /* ... */ } // configuration object
$http(config) 
.success(function(data, status, headers, config) { 
if (data.status) { 
// succefull login 
User.isLogged = true; 
User.username = data.username; 
} 
else { 
User.isLogged = false; 
User.username = ''; 
} 
}) 
.error(function(data, status, headers, config) { 
User.isLogged = false; 
User.username = ''; 
}); 
}

次に、UserService に依存すると宣言されているコントローラー、ビュー、フィルターなどは、UserService.isLogged を使用して、ユーザーが検証済みユーザーであるか匿名ユーザーであるかを判断できます

AngularJS は通常、ページの分割と再編成にテンプレートを使用するため、routeProvider を使用して各ページのアクセス ルールを制御します。

app.config(['$routeProvider', function($routeProvider) { 
$routeProvider.when('/login', { templateUrl: 'partials/login.html', controller: 'loginCtrl' , access: {isFree: true}}); 
$routeProvider.when('/main', { templateUrl: 'partials/main.html', controller: 'mainCtrl' }); 
$routeProvider.otherwise({ redirectTo: '/main' }); 
}]);

login.html など、認証なしでアクセスできるページと、main.html など、ログインしたユーザーのみが表示できるページがあります。この時点で、一般的な checkUser ロジックを追加する必要があります。現在のユーザーは次のページを参照できます:

directives.directive('checkUser', ['$rootScope', '$location', 'userSrv', function ($root, $location, userSrv) { 
return { 
link: function (scope, elem, attrs, ctrl) { 
$root.$on('$routeChangeStart', function(event, currRoute, prevRoute){ 
if (!prevRoute.access.isFree && !userSrv.isLogged) { 
// reload the login route 
} 
/* 
* IMPORTANT: 
* It's not difficult to fool the previous control, 
* so it's really IMPORTANT to repeat the control also in the backend, 
* before sending back from the server reserved information. 
*/ 
}); 
} 
} 
}]);

このディレクティブは rootScope に登録され、routeChangeStart を監視します。これは、ルート変更が発生する前に、ユーザーの ID と権限を決定するためのアスペクトが組み込まれています。これにより、AngularJS の ID 検証のロジック全体が実現されます。

以上は編集者が紹介したAngularJSの認証方法ですので、皆様の参考になれば幸いです。