我创建了一个github回购，基本上总结了这篇文章：https : //medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec
ng-login Github回购
柱塞
我会尽力向您解释，希望对您有所帮助：
（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）验证服务： auth.js服务中实现了以下所有功能。$ 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）访问控制：要拒绝某些路由的访问，必须执行两个步骤：
a）在ui路由器的$ stateProvider服务上添加允许访问每个路由的角色的数据，如下所示（对于ngRoute也可以使用）。
.config(function ($stateProvider, USER_ROLES) {
$stateProvider.state('dashboard', {
url: '/dashboard',
templateUrl: 'dashboard/index.html',
data: {
authorizedRoles: [USER_ROLES.admin, USER_ROLES.editor]
}
});
})
b）在$ rootScope。$ on（'$ 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通过添加directives.js中包含的指令，可以轻松避免出现第一篇文章中所述的表单数据自动填充错误。
PS2此代码可由用户轻松调整，以允许查看不同的路线，或显示不希望显示的内容。逻辑必须在服务器端实现，这只是在ng-app上正确显示内容的一种方法。