আমি এই নিবন্ধটি মূলত সংক্ষেপে একটি গিথুব রেপো তৈরি করেছি: https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec
এনজি-লগইন গিথুব রেপো
প্লাঙ্কার
আমি যথাসম্ভব যথাযথভাবে ব্যাখ্যা করার চেষ্টা করব, আশা করি আমি আপনার কয়েকজনকে সেখানে সাহায্য করব:
(1) app.js: অ্যাপ সংজ্ঞা অনুসারে প্রমাণীকরণের ধ্রুবক তৈরি করা
var loginApp = angular.module('loginApp', ['ui.router', 'ui.bootstrap'])
.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) অথথ পরিষেবা: নিম্নলিখিত সমস্ত ফাংশন auth.js পরিষেবাতে প্রয়োগ করা হয়। প্রমাণীকরণ পদ্ধতির জন্য সার্ভারের সাথে যোগাযোগ করার জন্য The 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) সেশন: ব্যবহারকারীর তথ্য রাখার জন্য একটি সিঙ্গলটন ton এখানে বাস্তবায়ন আপনার উপর নির্ভর করে।
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 টি পদক্ষেপ প্রয়োগ করতে হবে:
ক) ইউই রাউটারের P রাজ্যপ্রাইডার পরিষেবাটিতে প্রতিটি রুটে অ্যাক্সেসের জন্য অনুমোদিত ভূমিকার ডেটা যুক্ত করুন (নীচে দেখা যাবে) (এনজিআরটে একই কাজ করতে পারে)।
.config(function ($stateProvider, USER_ROLES) {
$stateProvider.state('dashboard', {
url: '/dashboard',
templateUrl: 'dashboard/index.html',
data: {
authorizedRoles: [USER_ROLES.admin, USER_ROLES.editor]
}
});
})
খ) $ রুটস্কোপ। $ অন ('$ stateChangeStart') ব্যবহারকারীর অনুমোদিত না হলে রাষ্ট্র পরিবর্তন রোধ করতে ফাংশন যুক্ত করুন।
$rootScope.$on('$stateChangeStart', function (event, next) {
var authorizedRoles = next.data.authorizedRoles;
if (!Auth.isAuthorized(authorizedRoles)) {
event.preventDefault();
if (Auth.isAuthenticated()) {
$rootScope.$broadcast(AUTH_EVENTS.notAuthorized);
} else {
$rootScope.$broadcast(AUTH_EVENTS.notAuthenticated);
}
}
});
()) অথথ ইন্টারসেপ্টার: এটি প্রয়োগ করা হয়েছে, তবে এই কোডের সুযোগটি পরীক্ষা করা যায় না। প্রতিটি $ 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);
}
};
} ]);
1 ম নিবন্ধে উল্লিখিত ফর্ম ডেটা অটোফিল সহ পিএস একটি বাগটি ডিরেক্টরেটিজ.জেএস-এ অন্তর্ভুক্ত থাকা নির্দেশকে যুক্ত করে সহজেই এড়ানো যায়।
PS2 এই কোডটি ব্যবহারকারীর দ্বারা সহজেই বিভিন্নভাবে চিহ্নিত করা যায়, বিভিন্ন রুট দেখা যায় না বা প্রদর্শিত সামগ্রী বোঝানো যায় না এমন সামগ্রী প্রদর্শন করা যায়। যুক্তিটি সার্ভার-সাইড প্রয়োগ করা উচিত, এটি আপনার এনজি-অ্যাপে জিনিসগুলি সঠিকভাবে প্রদর্শন করার এক উপায়।