AngularJS_AngularJS でのユーザー アクセスのための ID 認証とフォーム検証機能の実装

認証
最も一般的な権限の設計は、RBAC ロールベースのアクセス制御です。基本的な考え方は、システム操作のためのさまざまな権限が特定のユーザーに直接付与されるのではなく、ユーザー セットと権限セットの間にロール セットが確立されるというものです。各役割は、対応する権限のセットに対応します。
ユーザーに適切な役割が割り当てられると、ユーザーはこの役割のすべての操作権限を持ちます。この利点は、ユーザーを作成するたびに権限を割り当てる必要がなく、対応するロールをユーザーに割り当てるだけで済むことです。さらに、ロールの権限の変更はユーザーの権限の変更よりもはるかに少ないです。これにより、ユーザー権限の管理が簡素化され、システムのオーバーヘッドが軽減されます。
Angular で構築されたシングルページ アプリケーションでは、このようなアーキテクチャを実装するために、フロントエンド エンジニアが対処する必要がある箇所が 3 つほどあります。 1. UI 処理 (ユーザーが持つ権限に基づいてページ上の一部のコンテンツが表示されるかどうかを決定します)
2. ルーティング処理（アクセス権限のないURLにアクセスした場合、エラーページへジャンプ）
3. HTTP リクエストの処理 (データリクエストを送信したときに、返されたステータスが 401 または 403 の場合、通常はエラー ページにリダイレクトされます)

アクセス ID 制御の実装
まず、Angular を開始する前に現在のユーザーのすべての権限を取得する必要があります。次に、より洗練された方法は、ページ上のコンテンツが権限に従って表示されるかどうかを UI 処理するために、サービスを通じてこのマッピング関係を保存することです。これらを処理した後、ルートを追加するときに追加の「permission」属性を追加し、どのロールがこの URL にジャンプする権限を持っているかを示す値を割り当ててリッスンする必要があります。現在のユーザーがこの URL へのアクセス権を持っているかどうかを確認するには、最後に、リクエストによって返されたステータスが 401 または 403 の場合に監視し、エラー ページにジャンプするために HTTP インターセプターが必要です。作業はたくさんあるように見えますが、実際には 1 つずつ処理するのは非常に簡単です。 401 を返すと、loginCtrl を実行し、403 を返すと、PermissionCtrl を実行します。

Angular を実行する前に権限のマッピング関係を取得します
Angular プロジェクトは ng-app を通じて開始されますが、場合によっては、Angular プロジェクトの起動を制御下に置きたい場合があります。たとえば、この場合は、現在ログインしているユーザーのすべての権限マッピング関係を取得したいと考えています。幸いなことに、Angular 自体がこのメソッド (angular.bootstrap().
) を提供しています。

var permissionList;
angular.element(document).ready(function() {
 $.get('/api/UserPermission', function(data) {
 permissionList = data;
 angular.bootstrap(document, ['App']);
 });
});

よく見ると、ここで $.get() が使用されていることに気づくかもしれませんが、現時点では Angular が起動されていないため、Angular の $resource や $http の代わりに jQuery を使用するのが正しいです。まだ。

さらに上記のコードを使用すると、取得したマッピング関係をサービスに組み込み、グローバル変数として使用できます。

// app.js
var app = angular.module('myApp', []), permissionList;

app.run(function(permissions) {
 permissions.setPermissions(permissionList)
});

angular.element(document).ready(function() {
 $.get('/api/UserPermission', function(data) {
 permissionList = data;
 angular.bootstrap(document, ['App']);
 });
});

// common_service.js
angular.module('myApp')
 .factory('permissions', function ($rootScope) {
 var permissionList;
 return {
  setPermissions: function(permissions) {
  permissionList = permissions;
  $rootScope.$broadcast('permissionsChanged')
  }
 };
 });

現在のユーザーの権限セットを取得した後、このセットを対応するサービスにアーカイブし、さらに 2 つの作業を行いました:

(1) アクセス許可をファクトリー変数に保存し、名前空間を汚すことなくグローバル変数の役割を達成するためにメモリ内に残るようにします。
(2) 権限が変更されたときに $broadcast を通じてイベントをブロードキャストします。


1. 権限に基づいて UI コンポーネントが表示されるか非表示になるかを決定する方法
ここでは、権限関係に基づいて要素を表示または非表示にするディレクティブを自分で記述する必要があります。

<!-- If the user has edit permission the show a link -->
<div has-permission='Edit'>
 <a href="/#/courses/{{ id }}/edit"> {{ name }}</a>
</div>

<!-- If the user doesn't have edit permission then show text only (Note the "!" before "Edit") -->
<div has-permission='!Edit'>
 {{ name }}
</div>

ここでは、has-permission 属性を渡して現在のユーザーが権限を持っている場合は表示され、そうでない場合は非表示になります。

angular.module('myApp').directive('hasPermission', function(permissions) {
 return {
 link: function(scope, element, attrs) {
  if(!_.isString(attrs.hasPermission))
  throw "hasPermission value must be a string";

  var value = attrs.hasPermission.trim();
  var notPermissionFlag = value[0] === '!';
  if(notPermissionFlag) {
  value = value.slice(1).trim();
  }

  function toggleVisibilityBasedOnPermission() {
  var hasPermission = permissions.hasPermission(value);

  if(hasPermission && !notPermissionFlag || !hasPermission && notPermissionFlag)
   element.show();
  else
   element.hide();
  }
  toggleVisibilityBasedOnPermission();
  scope.$on('permissionsChanged', toggleVisibilityBasedOnPermission);
 }
 };
});

前のファクトリーを展開します:

angular.module('myApp')
 .factory('permissions', function ($rootScope) {
 var permissionList;
 return {
  setPermissions: function(permissions) {
  permissionList = permissions;
  $rootScope.$broadcast('permissionsChanged')
  },
  hasPermission: function (permission) {
  permission = permission.trim();
  return _.some(permissionList, function(item) {
   if(_.isString(item.Name))
   return item.Name.trim() === permission
  });
  }
 };
 });

2. ルート上の権限に基づいてアクセス
この部分の実装の考え方は次のとおりです: ルートを定義するときに、現在の URL にアクセスするための権限属性を追加します。その後、routeChangeStart イベントを使用して監視します。 URL が変更されるたびに、ジャンプする現在の URL が条件を満たしているかどうかを確認し、正常にジャンプするか、間違ったプロンプト ページにジャンプするかを決定します。

mainController.js またはindexController.js (つまり、親コントローラー)

app.config(function ($routeProvider) {
 $routeProvider
 .when('/', {
  templateUrl: 'views/viewCourses.html',
  controller: 'viewCoursesCtrl'
 })
 .when('/unauthorized', {
  templateUrl: 'views/error.html',
  controller: 'ErrorCtrl'
 })
 .when('/courses/:id/edit', {
  templateUrl: 'views/editCourses.html',
  controller: 'editCourses',
  permission: 'Edit'
 });
});

这里依然用到了之前写的hasPermission,这些东西都是高度可复用的.这样就搞定了,在每次view的route跳转前,在父容器的Controller中判断一些它到底有没有跳转的权限即可.

3.HTTP请求处理
这个应该相对来说好处理一点,思想的思路也很简单.因为Angular应用推荐的是RESTful风格的借口,所以对于HTTP协议的使用很清晰.对于请求返回的status code如果是401或者403则表示没有权限,就跳转到对应的错误提示页面即可.
当然我们不可能每个请求都去手动校验转发一次,所以肯定需要一个总的filter.代码如下:

angular.module('myApp')
 .config(function($httpProvider) {
 $httpProvider.responseInterceptors.push('securityInterceptor');
 })
 .provider('securityInterceptor', function() {
 this.$get = function($location, $q) {
  return function(promise) {
  return promise.then(null, function(response) {
   if(response.status === 403 || response.status === 401) {
   $location.path('/unauthorized');
   }
   return $q.reject(response);
  });
  };
 };
 });

写到这里就差不多可以实现在这种前后端分离模式下,前端部分的权限管理和控制了。

表单验证
AngularJS 前端验证指令

var rcSubmitDirective = {
 'rcSubmit': function ($parse) {
 return {
  restrict: "A",
  require: [ "rcSubmit", "?form" ],
  controller: function() {
  this.attempted = false;
  var formController = null;
  this.setAttempted = function() {
   this.attempted = true;
  };
  this.setFormController = function(controller) {
   formController = controller;
  };
  this.needsAttention = function(fieldModelController) {
   if (!formController) return false;
   if (fieldModelController) {
   return fieldModelController.$invalid && (fieldModelController.$dirty || this.attempted);
   } else {
   return formController && formController.$invalid && (formController.$dirty || this.attempted);
   }
  };
  },
  compile: function() {
  return {
   pre: function(scope, formElement, attributes, controllers) {
   var submitController = controllers[0];
   var formController = controllers.length > 1 ? controllers[1] : null;
   submitController.setFormController(formController);
   scope.rc = scope.rc || {};
   scope.rc[attributes.name] = submitController;
   },
   post: function(scope, formElement, attributes, controllers) {
   var submitController = controllers[0];
   var formController = controllers.length > 1 ? controllers[1] : null;
   var fn = $parse(attributes.rcSubmit);
   formElement.bind("submit", function(event) {
    submitController.setAttempted();
    if (!scope.$$phase) scope.$apply();
    if (!formController.$valid) return;
    scope.$apply(function() {
    fn(scope, {
     $event: event
    });
    });
   });
   }
  };
  }
 };
 }
};

验证通过

<form name="loginForm" novalidate
  ng-app="LoginApp" ng-controller="LoginController" rc-submit="login()">
 <div class="form-group"
   ng-class="{'has-error': rc.loginForm.needsAttention(loginForm.username)}">
  <input class="form-control" name="username" type="text"
    placeholder="Username" required ng-model="session.username" />
  <span class="help-block"
    ng-show="rc.form.needsAttention(loginForm.username) && loginForm.username.$error.required">Required</span>
 </div>
 <div class="form-group"
   ng-class="{'has-error': rc.loginForm.needsAttention(loginForm.password)}">
  <input class="form-control" name="password" type="password"
    placeholder="Password" required ng-model="session.password" />
  <span class="help-block"
    ng-show="rc.form.needsAttention(loginForm.password) && loginForm.password.$error.required">Required</span>
 </div>
 <div class="form-group">
  <button type="submit" class="btn btn-primary pull-right"
    value="Login" title="Login">
   <span>Login</span>
  </button>
 </div>
</form>

样式如下

前端验证通过会调用login()。