मैंने इस लेख को मूल रूप से एक गितुब रेपो बनाया है: https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf034sacec
एनजी-लॉगिन जीथब रेपो
Plunker
मैं जितना संभव हो उतना अच्छा समझाने की कोशिश करूँगा, आशा है कि मैं आप में से कुछ की मदद करूँगा:
(1) app.js: एप्लिकेशन परिभाषा पर प्रमाणीकरण स्थिरांक का निर्माण
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) प्रामाणिक सेवा : सभी निम्नलिखित कार्य ओडिसी.जेएस सेवा में कार्यान्वित किए जाते हैं। प्रमाणीकरण प्रक्रियाओं के लिए सर्वर के साथ संचार करने के लिए $ http सेवा का उपयोग किया जाता है। इसमें प्राधिकरण पर कार्य शामिल हैं, अर्थात यदि उपयोगकर्ता को एक निश्चित कार्रवाई करने की अनुमति है।
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) सत्र: उपयोगकर्ता डेटा रखने के लिए एक सिंगलटन। यहां कार्यान्वयन आप पर निर्भर करता है।
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) पैरेंट कंट्रोलर: इसे अपने एप्लिकेशन के "मुख्य" फंक्शन के रूप में समझें, सभी कंट्रोलर इस कंट्रोलर से इनहेरिट करते हैं, और यह इस ऐप के ऑथेंटिकेशन की रीढ़ है।
<body ng-controller="ParentController">
[...]
</body>
(5) अभिगम नियंत्रण: कुछ मार्गों पर पहुंच से इनकार करने के लिए 2 चरणों को लागू करना होगा:
क) यूआई राउटर की $ स्टेटप्रॉइडर सेवा पर प्रत्येक मार्ग तक पहुंचने की अनुमति दी गई भूमिकाओं का डेटा जोड़ें, जैसा कि नीचे देखा जा सकता है (उसी तरह यह एनकाउंटर के लिए काम कर सकता है)।
.config(function ($stateProvider, USER_ROLES) {
$stateProvider.state('dashboard', {
url: '/dashboard',
templateUrl: 'dashboard/index.html',
data: {
authorizedRoles: [USER_ROLES.admin, USER_ROLES.editor]
}
});
})
ख) $ rootScope पर। $ पर ('$ StateChangeStart') उपयोगकर्ता को अधिकृत नहीं होने पर राज्य परिवर्तन को रोकने के लिए फ़ंक्शन जोड़ें।
$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 {
// user is not logged in
$rootScope.$broadcast(AUTH_EVENTS.notAuthenticated);
}
}
});
(6) प्रामाणिक इंटरसेप्टर: इसे लागू किया गया है, लेकिन इस कोड के दायरे में जाँच नहीं की जा सकती है। प्रत्येक $ http अनुरोध के बाद, यह इंटरसेप्टर स्टेटस कोड की जाँच करता है, यदि नीचे में से कोई एक लौटाया जाता है, तो यह उपयोगकर्ता को फिर से लॉग-इन के लिए बाध्य करने के लिए एक घटना प्रसारित करता है।
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);
}
};
} ]);
PS आलेख प्रपत्र में बताए गए प्रपत्र डेटा ऑटोफिल के साथ एक बग को निर्देश में शामिल किए गए निर्देश को जोड़कर आसानी से टाला जा सकता है। js।
PS2 इस कोड को आसानी से उपयोगकर्ता द्वारा देखा जा सकता है, विभिन्न मार्गों को देखने की अनुमति देने के लिए, या ऐसी सामग्री प्रदर्शित करने के लिए जो प्रदर्शित होने के लिए नहीं थी। तर्क को सर्वर-साइड लागू किया जाना चाहिए, यह आपके एनजी ऐप पर चीजों को ठीक से दिखाने का एक तरीका है।