J'ai créé un dépôt github pour résumer cet article en gros: https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec
ng-login dépôt Github
Plunker
Je vais essayer de l'expliquer aussi bien que possible, j'espère aider certains d'entre vous:
(1) app.js: Création de l'authentification des constantes sur l'application de la définition
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) Service de Demenagement: Toutes les fonctions suivantes sont mises en œuvre dans auth.js service. Le $service http est utilisé pour communiquer avec le serveur pour que les procédures d'authentification. Contient également des fonctions sur l'autorisation, c'est si l'utilisateur est autorisé à effectuer une certaine action.
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) Session: Un singleton pour garder les données de l'utilisateur. La mise en œuvre d'ici dépend de vous.
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) contrôleur de Parent: Considérer cela comme de la "main" en fonction de votre demande, tous les contrôleurs, qui héritent de ce contrôleur, et c'est l'épine dorsale de l'authentification de cette application.
<body ng-controller="ParentController">
[...]
</body>
(5) contrôle d'Accès: À refuser l'accès à certaines routes, 2 étapes de mise en œuvre:
a) Ajouter des données de l'rôles autorisés à accéder à chaque itinéraire, sur l'interface utilisateur du routeur $stateProvider service comme on peut le voir ci-dessous (même peut travailler pour ngRoute).
.config(function ($stateProvider, USER_ROLES) {
$stateProvider.state('dashboard', {
url: '/dashboard',
templateUrl: 'dashboard/index.html',
data: {
authorizedRoles: [USER_ROLES.admin, USER_ROLES.editor]
}
});
})
b) Sur $rootScope.$('$stateChangeStart') ajout de la fonction pour empêcher la modification de l'état si l'utilisateur n'est pas autorisé.
$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 {d
// user is not logged in
$rootScope.$broadcast(AUTH_EVENTS.notAuthenticated);
}
}
});
(6) Auth intercepteur: Ceci est mis en œuvre, mais ne peut pas être vérifiée sur le champ d'application de ce code. Après chaque $requête http, l'intercepteur vérifie le code d'état, si l'un des ci-dessous est retourné, puis il diffuse un événement de force l'utilisateur à se connecter à nouveau.
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);
}
};
} ]);
P. S. Un bug avec les données du formulaire de saisie automatique comme indiqué sur l'article 1er peut être facilement évité en ajoutant la directive qui est inclus dans directives.js.
P. S. 2 Ce code peut facilement être modifié par l'utilisateur, afin de permettre à des voies différentes pour être vu, ou afficher du contenu qui n'était pas destiné à être affiché. La logique DOIT être mis en œuvre côté serveur, c'est juste une façon de montrer les choses correctement sur votre ng-app.
