翻译：AngularJS应用的认证技术

原文：

https://medium.com/opinionated-angularjs/7bbf0346acec

认证

最常用的表单认证就是用户名（或者邮件）和密码登录。这就表示要实现一个用户可以输入他们证书的登录表单。这样的表单可能像这样：

1 <form name="loginForm" ng-submit="login(credentials)" novalidate>
2   <label for="username">Username:</label>
3   <input id="username" type="text" ng-model="credentials.username"/>
4 
5   <label for="password">Password:</label>
6   <input id="password" type="password" ng-model="credentials.password"/>
7 
8   <button type="submit">Login</button>
9 </form>

(注意：下面有一个升级版的，这个只是一个简单示例)

因为Angular提供了form，我们在提交的时候可以用ngSubmit指令触发一个作用域函数。注意到我们传了credentials作为一个参数，而不是用$scope.credentials，这让函数更容易进行单元测试和避免和环境作用域的耦合。其对应的控制器可能像这样：

 1 　// var app = angular.module('myApp', [‘ui.router’]) or
 2 　var app = angular.module('myApp', ['ngRoute'])
 3   app.controller('LoginController', [
 4     '$scope',
 5     '$rootScope',
 6     'AUTH_EVENTS',
 7     'AuthService',
 8     function ($scope, $rootScope, AUTH_EVENTS, AuthService) {
 9       $scope.credentials = {
10         username: '',
11         password: ''
12       };
13       $scope.login = function (credentials) {
14         AurhService.login(credentials)
15           .then(function () {
16             $rootScope.$broadcast(AUTH_EVENTS.loginSuccess);
17           }, function () {
18             $rootScope.$broadcast(AUTH_EVENTS.loginFailed);
19           });
20       };
21     }])

第一我们注意到缺省的真实逻辑代码。这是有意这样做的，为了将表单从实际的认证逻辑中解耦。通常一个好的方式就是将尽可能多的逻辑抽离出你的控制器，以服务来填充。AngularJS的控制器应该只管理$scope对象（通过监视和操作），而不应该变得厚重。

会话改变交流

认证是一种会影响全部应用的东西。因为这样我选择使用events事件（和$broadcast广播）和用户会话交流。将可用的事件代码集中放在一个地方是一个良好的实践。我喜欢将它们作为应用常量

1 app.constant('AUTH_EVENTS', {
2     loginSuccess: 'auth-login-success',
3     loginFailed: 'auth-login-failed',
4     logoutSuccess: 'auth-logout-success',
5     sessionTimeout: 'auth-session-timeout',
6     notAuthenticated: 'auth-not-authenticated',
7     notAuthorized: 'auth-not-authorized'
8   });

关于AngularJS的应用常量很棒的事是它们可以被注入到服务（services）中，这样在你的单元测试中可以轻易用假数据代替。同时以后你可以很轻松地重命名它们（改变值），而不用更改一大坨文件。用户的角色也用了相同的技巧：

1 app.constant('USER_ROLES', {
2     all: '',
3     admin: 'admin',
4     editor: 'editor',
5     guest: 'guest'
6   });

如果你想要给所有编辑者和管理员一样的权限，只需要简单地将editor的值改为admin。

AuthService认证授权服务

认证和授权的相关逻辑最好放在一个服务里面：

 1 app.factory('AuthService', [
 2     '$http',
 3     'Session',
 4     function($http, Session){
 5       return {
 6         login: function login(credentials){
 7           return $http.post('/login', credentials)
 8             .then(function(res){
 9               Session.create(res.id, res.userid, res.role);
10             });
11         },
12         isAuthenticated: function(){
13           return !!Session.userid;
14         },
15         isAuthorized: function(authorizedRoles){
16           if(!angular.isArray(authorizedRoles)){
17             authorizedRoles = [authorizedRoles];
18           }
19 
20           return (this.isAuthenticated()
21             && authorizedRoles.indexOf(Session.userRole) !== -1);
22         }
23       };
24     }
25   ]);

为了更深的分离有关认证，我用了另一个服务（单体对象，service风格）来保留用户的会话信息。这个对象的细节依赖于你后端的接口，但是我在下面给出了一个通用的例子。你可以还想要用一个包装器封装$http（例如一个“API”provider服务），这样你就可以通过你的app的config函数配置URL。

 1 app.service('Session', function(){
 2     this.create = function(sessionId, userId, userRole){
 3       this.id = sessionId;
 4       this.userId = userId;
 5       this.userRole = userRole;
 6     };
 7     this.destroy = function(){
 8       this.id = null;
 9       this.userId = null;
10       this.userRole = null;
11     };
12     return this;
13   });

一单一个用户登进来，你会想要在某个地方（可能右上角）显示他的信息。为了做到这个，用户对象必须引用$scope对象，最好是在一个可以被整个应用访问到的地方。毫不犹豫想到的第一个选择就是$rootScope，但是我会避免经常使用$rootScope(事实上我只在全局事件广播的时候才用到它)。代替地，我偏爱在应用的根节点中定义一个控制器，或者至少在某个够高的节点，body标签会是一个好的候选：

ApplicationController是一个有许多全局应用逻辑的容器，而且是Angular的run函数的代替品。因为它在$scope树的根节点，其他所有的作用域都会继承它（除了独立作用域）。是个定义当前用户对象的好地方：

 1 app.controller('ApplicationController', [
 2     '$scope',
 3     'USER_ROLES',
 4     'AuthService',
 5     function($scope, USER_ROLES, AuthService){
 6       $scope.currentUser = null;
 7       $scope.userRoles = USER_ROLES;
 8       $scope.isAuthorized = AuthService.isAuthorized;
 9     }
10   ]);

我们并没有指定当前用户对象，我们只是初始化作用域的属性。这里的作用是创建一个占位符，供我们以后（从任意子作用域）存储对象。这是一个技巧将一个可用的变量定义在高层次的作用域，而不是你实际指定的地方。如果你想要了解更多，首先得明白原型继承的概念。

除了初始化currentUser属性，我还添加了USER_ROLES和isAuthorized函数。这些应该只用在模板表达式中，而不是在其它控制器中，因为那样会使控制器的测试性变得复杂。

Access control访问控制

授权a.k.a访问控制在AngularJS中并不真实存在。因为我们谈论的是一个客户端应用，所有的源码都是有关客户端的。我们并没有阻止用户篡改相关代码来获得访问特定的视图和界面元素。我们只是进行了简单的显示控制。如果你需要真实的授权你不得不在服务端进行，但那不在本文之类。

estricting element visibility限制元素显示

AngularJS有几种指令可以显示隐藏一个元素，这些指令都是基于作用与属性或者表达式：ngShow, ngHide, ngIf和ngSwitch。前两个会使用style属性来隐藏元素，后两个则会将元素从DOM中删除。

前两种最好用在当表达式频繁改变，而且元素不包含很多模板逻辑和作用域引用。原因是任何模板逻辑内部有隐藏元素，将会导致每次digest循环的时候被重新评估，使应用变得缓慢。后两种方案将会完全移除DOM元素，包括事件处理程序和作用域绑定。把工作交给浏览器来干，但大多数时候都较效率。因为用户访问不会经常改变，使用ngIF或者ngSwitch是最好的选择：

1 <div ng-if="currentUser">Welcome, {{ currentUser.name }}</div>
2 
3 <div ng-if="isAuthorized(userRoles.admin)">You're admin.</div>
4 
5 <div ng-switch on="currentUser.role">
6   <div ng-switch-when="userRoles.admin">you're admin.</div>
7   <div ng-switch-when="userRoles.editor">You're editor.</div>
8   <div ng-switch-default>you're something else</div>
9 </div>

Switch的例子是假设一个用户只能有一个角色。

Restricting route access限制路由访问

大多数时候你想要禁止访问整个页面而不是隐藏单个元素。在路由中用自定义的数据。我们可以指定哪个角色可以通过访问。这里使用了UI Router（https://github.com/angular-ui/ui-router）：

1 app.config(function ($stateProvider, USER_ROLES) {
2     $stateProvider.state('dashboard', {
3       url: '/dashboard',
4       templateUrl: 'dashboard/index.html',
5       data: {
6         authorizedRoles: [USER_ROLES.admin, USER_ROLES.editor]
7       }
8     });
9   });

下面为使用ngRoute的例子

 1 app.config([
 2     '$routeProvider',
 3     'USER_ROLES',
 4     function($routeProvider, USER_ROLES){
 5       $routeProvider.when('/dashboard', {
 6         templateUrl: 'dashboard/index.html',
 7         resolve: {
 8           authorizedRoles: [USER_ROLES.admin, USER_ROLES.editor]
 9         }
10       });
11     }
12   ]);

下一步当路由改变的时候，我们需要每次检查这个属性。这里涉及到监听$locationChangeStart(for ngRoute)或者$statechangeStart(for ui.router)事件：

 1 app.run([
 2     '$rootScope',
 3     'AUTH_EVENTS',
 4     'AuthService',
 5     function($rootScope, AUTH_EVENTS, AuthService){
 6       $rootScope.$on('$locationChangeStart', function(event, next){
 7         var authorizedRoles = next.authorizedRoles;
 8         if(!authService.isAuthorized(authorizedRoles)) {
 9           event.preventDefault();
10           if(AuthService.isAuthenticated()) {
11             // user is not allowed
12             $rootScope.$broadcast(AUTH_EVENTS.notAuthorized);
13           } else {
14             // user is not logged in
15             $rootScope.$broadcast(AUTH_EVENTS.notAuthenticated);
16           }
17         }
18       });
19     }
20   ]);

当一个用户未被授权访问一个页面（因为他没有登录或者没有权限），当下一个页面的过渡将会被阻止，所以用户仍会停留在当前页面。下一步，我们广播一个事件给其他模块。我建议在页面中加上loginDialog指令，当未认证事件被触发时显示，还有当未授权事件触发时应该显示一个错误信息。

Session expiration会话过期

认证几乎是服务端的事了。不管你怎么实现，你的后端都要验证用户证书，处理像会话过期和撤销访问的事。这表示你的API有时将会响应认证错误。标准的方式是通过HTTP状态码来交流。常用的认证错误状态码有：

1.401 Unanthorized（未授权）----用户没有登入

2.403 Forbidden（禁止） ---- 用户登入了但不允许访问。

3.419 Authentication Timeout（认证超时） ---- 会话过期

5.440 Login Timeout（登入超时，只有微软才会） ---- 会话过期

最后两个并不是标准的部分，但可能会被用到。最好的官方办法就是通过401交流会话超时。不管怎样，你的loginDialog应该在API返回401,419或者440自动出现，还有当403时，错误应该被显示出来。首先我们想要广播同样的基于HTTp响应状态码的notAuthenticated/notAuthorized事件。为了达到目的，我们给$httpProvider添加一个拦截器：

 1 app.config(['$httpProvider', function($httpProvider){
 2     $httpProvider.intercepters.push([
 3       '$injector',
 4       function($injector){
 5         return $injector.get('AuthInterceptor');
 6       }
 7     ]);
 8   }])
 9     .factory('AuthInterceptor', [
10       '$rootScope',
11       '$q',
12       'AUTH_EVENTS',
13       function($rootScope, $q, AUTH_EVENTS){
14         return {
15           responseError: function(response){
16             var event;
17             switch(response.status){
18               case 401:
19                 event = AUTH_EVENTS.notAuthenticated;
20                 break;
21               case 403:
22                 event = AUTH_EVENTS.notAuthorized;
23                 break;
24               case 419:
25               case 440:
26                 event = AUTH_EVENTS.sessionTimeout
27             }
28 
29             $rootScope.$broadcast(event, response);
30             return $q.reject(response);
31           }
32         };
33       }
34 　　]);

这是一个简单的Auth拦截器实现。在Github上有一个更好的项目也做同样事情，但是还包括了一个httpBuffer服务，当HTTP错误返回，将会阻止API请求，直到用户再次登入，才会顺序触发它们。

Issues with the login form登录表单的一些问题

许多用户将会以来一个密码管理来保存他们的证书，这样他们以后就可以轻松登录了。如果你使用文章开头的简单示例，你会发现密码管理器很难和AngularJS表单一起工作。有两个问题将会发生：

1.表单提交并没有被检测到，所以证书没有被存储。

2.自动填充域并没有被AngularJS提取。

这些问题可以被绕开，但是这涉及到一个iframe和一个超时函数。如果你更偏爱你的代码整洁，而不是丑陋的hack，你可能想要将登录表单完全的从AngularJS独立出去，转而替代地依赖过时的服务端渲染，否则还是使用这个升级版的表单：

 1 <iframe src="sink.html" frameborder="0" name="sink" style="display:none;"></iframe>
 2 
 3 <form name="loginForm" action="sink.html" target="sink" method="post"
 4   ng-submit="login(credentials)"
 5   novalidate
 6   form-autofill-fix>
 7 
 8   <label for="username">Username:</label>
 9   <input id="username" type="text" ng-model="credentials.username"/>
10 
11   <label for="password">Password:</label>
12   <input id="password" type="password" ng-model="credentials.password"/>
13 
14   <button type="submit">Login</button>
15   
16   </form>

不同之处在于我们新加了<iframe>和给<form>元素新加了一些属性。通过提供action，target和method，当调用ngSubmit函数时，表单会被post到iframe的sink.html中。这种方式浏览器的正常表单处理逻辑会被剔除，地址栏不会跳转到sink.html（至少在主窗口中）。密码管理器会认识到这是一个正常的表单提交，然后请求存储证书到密钥中。Sink.html页面只是一个空的HTML文档，在你的index.html同级。我会在这样写上注释解释为什么该文件存在（这样其他开发者就不会删除它）。

注意：不要忘了method=”post”,f否则你的证书会被添加到查询字符串参数后面，这样会暴露到浏览器的历史记录中。

现在密码管理器可以存储证书了，我们不得不支持恢复这些证书。这叫做自动填充（又叫自动完成）。自动填充的问题是大多数浏览器不会触发被填充的输入域的事件。因为这样，AngularJS没有办法知道域内的内容是否被改变了，然后就不会更新$scope对象。结果当提交一个按理来说完成的登录表单的时候，只会因为提供了无效的证书而被拒绝访问。这就是formAutofillFix指令存在的意义：

 1 app.directive('formAutofillFix', [
 2     '$timeout',
 3     function($timeout){
 4       return function(scope, element, attrs){
 5         element.prop('method', 'post');
 6 
 7         if(!attrs.length) return;
 8 
 9         $timeout(function(){
10           element.off('submit')
11             .on('submit', function(event){
12               event.preventDefault();
13               element.find('input, textarea, select')
14                 .trigger('input')
15                 .trigger('change')
16                 .trigger('keydown');
17 
18               scope.$apply(attrs.ngSubmit);
19             });
20         });
21       };
22     }
23   ]);

这个指令通过一个函数将会重新绑定submit事件，这个函数会触发每个输入域的事件（强制Angular更新作用域），等待Angular完成digest循环，就会调用ngSubmit函数。当表单被提交的时候，任何作用域都会被更新成自动填充值。这种方式的一个缺陷就是表单验证不会工作了，因为自动填充值在表单提交之前对于作用于来说是无效的。如果你需要表单验证正常工作，这里有一个polyfill（https://github.com/tbosch/autofill-event）可以提前触发change事件。

有无数变数和其他的选择，最终你几乎要依赖后端的实现。真正安全的办法还是在于服务端，而且记住总是使用HTTPS。

转载于:https://www.cnblogs.com/webFrontDev/p/3641975.html

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

eclipse 搭建anguarl开发环境
AngularJS Eclipse——新手入门【翻译整理】原文地址本文介绍如何安装和配置 AngularJS Eclipse。AngularJS Eclipse 插件是基于强大的 JavaScript 推断引擎（javascript inference engine）Tern.js， 它由 JavaScript 编写。若在 java 环境下使…...
2024/4/20 15:41:36
分享给大家一些不错的软件06
-结构设计及分析 3D3S结构系统： 3D3S v12.1.7 破解版 1CD 3D3S 9.0 破解版 1CD 3D3S 8.0 破解版 1CD(除幕墙及塔架，其他模块均好用) 3D3S 7.0 结构系统 1CD(网架、门式刚架、玻璃幕墙、桁架、塔架等模块均好用) 3D3S 7.0 学习资料 1CD RSG.CFS.v11…...
2024/5/2 20:09:10
唐鏖双眼皮案例
...
2024/5/2 11:24:41
时光整形双眼皮图片
...
2024/4/26 6:42:30
双眼皮消肿需要多久
...
2024/5/3 13:39:48
天桥医院割双眼皮后多久能洗脸
...
2024/4/21 13:59:03
带你5分钟了解vue
带你5分钟了解vue 想要获取更多关于vue的知识吗，＋q群902961830 答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb； 简单易学：国人开发，中文文档&am…...
2024/4/21 13:59:02
get 与 post的区别?application json 与form表单的区别?
这里是修真院前端小课堂，每篇分享文从【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】八个方面深度解析前端知识/技能，本篇分享的是： 【 get 与 post的区别?application json 与fo…...
2024/4/21 13:59:02
四种常见的POST请求参数形式
post请求中的参数形式一、初识post请求实例 1、Angular的ajax功能 AngularJs的ajax的post请求参数就是提交的json字符串。如：var data {name:jack};$http.post(url,data).success(function(rsp){// code})2、application/json JSON.stringify（&…...
2024/4/21 13:59:01
双眼皮修复?w伊看诊
...
2024/4/21 13:59:00
双眼皮热敷要多少度
...
2024/4/21 13:58:58
双眼皮一年了疤痕
...
2024/4/21 13:58:57
正常情况双眼皮留疤吗
...
2024/4/21 13:58:57
长沙切双眼皮s美莱
...
2024/4/21 13:58:56
ROS基础坐标管理系统与广播监听
机器人中的坐标变换因为机器人各部位的坐标不同，在控制运行中考虑各部位坐标的计算会让程序变得繁琐复杂，所以ROS提供了TF功能包用于处理机器人各部位的坐标关系 TF功能包不同时间内，机器人部位坐标相对于全局坐标的关系机器人部位进行操…...
2024/4/21 13:58:54
PX4——mc_att_control(姿态控制)
本文转载自博主： summer 博客：《Pixhawk之姿态控制篇（1）_源码算法分析（超级有料）》原博客地址：http://blog.csdn.net/qq_21842557/article/details/51439171 1、写在前面无人机控制部…...
2024/4/21 13:58:53
angularV4+学习笔记
angular学习笔记之组件篇 1注解 1.1组件注解 Component注解，对组件进行配置。 1.1.1注解Component的元数据 selectortemplate/templateUrlinputs/outputshoststyleUrlsselector:选择器页面渲染时，Angular组件匹配的选择器, 使用方式： <ip…...
2024/4/27 6:12:28
Angular快速学习笔记(4) -- Observable与RxJS
介绍RxJS前，先介绍Observable 可观察对象（Observable） 可观察对象支持在应用中的发布者和订阅者之间传递消息。可观察对象可以发送多个任意类型的值 —— 字面量、消息、事件。基本用法和词汇作为发布者，你创建一个 Observable…...
2024/4/28 19:40:21
ROS中TF广播和监听个人理解及消息查找
ROS学习古月居TF使用总结目录ROS学习古月居TF使用总结大佬链接总代码目录The Code of TFboardcastThe Code of TFlistenerThe Code of launch广播和监听者的使用总结广播的创建和使用监听的创建和使用对整个程序的总结整个程序的逻辑顺序关于transform这个类关于数据的初始化关…...
2024/4/21 13:58:51
ionic4-EventBus(事件总线)
ionic4-EventBus(事件总线) 环境 node 10.15.0 ionic 4.12.0 cordova 9.0 # platforms cordova-android：8.0.0 cordova-ios: 5.0.0欢迎访问我的专栏： ionic4 混合开发实战-csdn ionic4 混合开发实战-简书前言： AngularJs 中，我…...
2024/4/28 15:35:01

翻译：AngularJS应用的认证技术

相关文章

最新文章