AngularJS_AngularJS에서 사용자 액세스를 위한 신원 인증 및 양식 확인 기능 구현
- WBOY원래의
- 2016-05-16 15:04:391383검색
인증
가장 일반적인 권한 설계는 RBAC 역할 기반 액세스 제어입니다. 기본 아이디어는 시스템 운영에 대한 다양한 권한을 특정 사용자에게 직접 부여하지 않고 사용자 집합과 권한 집합 간에 역할 집합을 설정한다는 것입니다. 각 역할은 해당 권한 집합에 해당합니다.
사용자에게 적절한 역할이 할당되면 사용자는 이 역할에 대한 모든 작업 권한을 갖게 됩니다. 이것의 장점은 사용자를 생성할 때마다 권한을 할당할 필요가 없으며 사용자에게 해당 역할만 할당하면 된다는 것입니다. 또한 역할의 권한 변경은 사용자의 권한 변경보다 훨씬 적습니다. 이는 사용자 권한 관리를 단순화하고 시스템 오버헤드를 줄입니다.
Angular에서 구축한 단일 페이지 애플리케이션에서는 이러한 아키텍처를 구현하기 위해 몇 가지 추가 작업을 수행해야 합니다. 전체 프로젝트 측면에서 프런트엔드 엔지니어가 처리해야 할 부분은 세 군데 정도입니다.
1. UI 처리(사용자가 가진 권한에 따라 페이지의 일부 콘텐츠가 표시되는지 여부 결정)
2. 라우팅 처리(접속권한이 없는 URL에 접속한 경우 에러페이지로 점프)
3. HTTP 요청 처리(데이터 요청을 보낼 때 반환된 상태가 401 또는 403인 경우 일반적으로 오류 페이지로 리디렉션됩니다.)
액세스 ID 제어 구현
먼저 Angular가 시작되기 전에 현재 사용자의 모든 권한을 얻어야 하며, 더 우아한 방법은 권한에 따라 페이지의 콘텐츠가 표시되는지 여부를 UI 처리하기 위해 서비스를 통해 이 매핑 관계를 저장하는 것입니다. 이를 처리한 후 경로를 추가할 때 추가 "권한" 속성을 추가하고 이 URL로 이동할 권한이 있는 역할을 나타내는 값을 할당한 다음 수신해야 합니다. Angular를 통해 RouteChangeStart 이벤트에 현재 사용자에게 이 URL에 대한 액세스 권한이 있는지 확인하려면 마지막으로 요청에 의해 반환된 상태가 401 또는 403인지 모니터링하고 오류 페이지로 이동하는 데 HTTP 인터셉터가 필요합니다. 양이 많아 보이지만 하나씩 처리하면 꽤 쉽습니다.
401을 반환하고 loginCtrl을 실행하고 403을 반환하고 PermissionCtrl을 실행합니다.
Angular가 실행되기 전에 권한 매핑 관계를 얻습니다
Angular 프로젝트는 ng-app을 통해 시작되지만 어떤 경우에는 Angular 프로젝트의 시작을 우리가 제어하기를 원합니다. 예를 들어 이 경우 현재 로그인한 사용자의 모든 권한 매핑 관계를 얻고 싶습니다. , 그리고 Angular 앱을 시작하세요. 다행스럽게도 Angular 자체에서 angle.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')
}
};
});
현재 사용자의 권한 집합을 얻은 후 이 집합을 해당 서비스에 보관한 다음 두 가지 작업을 더 수행했습니다.
(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>
여기서는 현재 사용자에게 권한 이름이 있는지 확인하기 위해 권한 있음 속성을 전달하는 것이 이상적인 상황임을 알 수 있습니다.
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이 조건을 충족하는지 확인한 후 점프에 성공할지 아니면 잘못된 프롬프트 페이지로 점프할지 결정하세요.
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'
});
});
mainController.js 또는 indexController.js(간략히 상위 컨트롤러)
app.controller('mainAppCtrl', function($scope, $location, permissions) {
$scope.$on('$routeChangeStart', function(scope, next, current) {
var permission = next.$$route.permission;
if(_.isString(permission) && !permissions.hasPermission(permission))
$location.path('/unauthorized');
});
});
这里依然用到了之前写的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()。