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에서는 서버에 사용자의 신원을 인증하는 로그인 기능을 정의할 수 있습니다.

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를 수신합니다. 이는 또한 경로 변경이 발생하기 전에 사용자의 신원과 권한을 결정하기 위해 AOP 개념입니다. 이를 통해 AngularJS의 전체 신원 확인 논리가 달성됩니다.

위는 편집자가 소개한 AngularJS 인증 방법입니다. 모든 분들께 도움이 되었으면 좋겠습니다.