day*_*mer 99 javascript authentication login angularjs
我是AngularJS的新手并完成了他们的教程,并对此感到满意.
我有一个准备好项目的后端,每个REST端点都需要进行身份验证.
我想做什么
.)我希望我的项目有一个页面http://myproject.com.
b.)一旦用户点击浏览器中的URL,基于用户是否登录,他将在同一URL下显示主页/视图或登录页面/视图http://myproject.com.
c.)如果用户未登录,则填写表单并且服务器设置USER_TOKEN会话,因此对端点的所有进一步请求将基于以下内容进行身份验证USER_TOKEN
我的困惑
a.)如何使用AngularJS处理客户端身份验证？我看到了这里,并在这里,但不知道如何使用它们
湾)我怎么能提出了基于用户不同的看法,如果用户在或不符合相同的URL登录http://myproject.com
我第一次使用angular.js,真的很困惑如何开始.非常感谢任何建议和/或资源.
Ale*_*dis 48
我创建了一个github repo,基本上总结了这篇文章:https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec
我会尝试尽可能好地解释,希望我帮助你们中的一些人:
(1)app.js:在app定义上创建认证常量
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服务:以下所有功能都在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)Auth拦截器:已实现,但无法检查此代码的范围.在每个$ 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中包含的指令,可以轻松避免第1篇文章中所述的表单数据自动填充的错误.
PS2用户可以轻松调整此代码,以允许查看不同的路径,或显示不打算显示的内容.逻辑必须在服务器端实现,这只是一种在ng-app上正确显示内容的方法.
day*_*mer 25
我喜欢这种方法并在服务器端实现它,而不在前端执行任何与身份验证相关的操作
我最近的应用程序上的'技术'是..客户端不关心Auth.应用程序中的每一件事都需要首先登录,因此除非在会话中检测到现有用户,否则服务器始终只提供登录页面.如果找到session.user,则服务器只发送index.html.巴姆:-o
寻找"安德鲁·乔斯林"的评论.
Tim*_*son 14
我在这里回答了类似的问题:AngularJS Authentication + RESTful API
我为UserApp编写了一个AngularJS模块,它支持受保护/公共路由,在登录/注销时重新路由,用于状态检查的心跳,将会话令牌存储在cookie中,事件等.
你可以:
https://github.com/userapp-io/userapp-angular
如果您使用UserApp,则不必为用户填写任何服务器端代码(不仅仅是验证令牌).参加Codecademy课程试试吧.
以下是一些如何工作的示例:
如何指定应该公开的路由以及登录表单的路由:
$routeProvider.when('/login', {templateUrl: 'partials/login.html', public: true, login: true});
$routeProvider.when('/signup', {templateUrl: 'partials/signup.html', public: true});
$routeProvider.when('/home', {templateUrl: 'partials/home.html'});
该.otherwise()路径应设置为您希望您的用户登录后重定向.例:
$routeProvider.otherwise({redirectTo: '/home'});
登录表单,错误处理:
<form ua-login ua-error="error-msg">
<input name="login" placeholder="Username"><br>
<input name="password" placeholder="Password" type="password"><br>
<button type="submit">Log in</button>
<p id="error-msg"></p>
</form>
具有错误处理的注册表单:
<form ua-signup ua-error="error-msg">
<input name="first_name" placeholder="Your name"><br>
<input name="login" ua-is-email placeholder="Email"><br>
<input name="password" placeholder="Password" type="password"><br>
<button type="submit">Create account</button>
<p id="error-msg"></p>
</form>
退出链接:
<a href="#" ua-logout>Log Out</a>
(结束会话并重定向到登录路由)
访问用户属性:
使用该user服务访问用户属性,例如:user.current.email
或者在模板中: <span>{{ user.email }}</span>
隐藏仅在登录时可见的元素:
<div ng-show="user.authorized">Welcome {{ user.first_name }}!</div>
根据权限显示元素:
<div ua-has-permission="admin">You are an admin</div>
要对您的后端服务进行身份验证,只需使用user.token()获取会话令牌并使用AJAX请求发送它.在后端,使用UserApp API(如果使用UserApp)检查令牌是否有效.
如果您需要任何帮助,请告诉我!