AngularJS 应用身份认证的技巧总结

在web中很多时候都能应用到身份认证，本文介绍了AngularJS 应用身份认证的技巧，废话不多说了一起往下看吧。

身份认证

最普遍的身份认证方式就是用用户名（或 email）和密码做登陆操作。这就意味要实现一个登陆的表单，以便用户能够用他们个人信息登陆。这个表单看起来是这样的：

<form name="loginForm" ng-controller="LoginController"   ng-submit="login(credentials)" novalidate> <label for="username">Username:</label> <input type="text" id="username"     ng-model="credentials.username"> <label for="password">Password:</label> <input type="password" id="password"     ng-model="credentials.password"> <button type="submit">Login</button></form>

既然这个是 Angular-powered 的表单，我们使用 ngSubmit 指令去触发上传表单时的函数。注意一点的是，我们把个人信息传入到上传表单的函数，而不是直接使用 $scope.credentials 这个对象。这样使得函数更容易进行 unit-test 和降低这个函数与当前 Controller 作用域的耦合。这个 Controller 看起来是这样的：

.controller('LoginController', function ($scope, $rootScope, AUTH_EVENTS, AuthService) { $scope.credentials = {  username: '',  password: '' }; $scope.login = function (credentials) {  AuthService.login(credentials).then(function (user) {   $rootScope.$broadcast(AUTH_EVENTS.loginSuccess);   $scope.setCurrentUser(user);  }, function () {   $rootScope.$broadcast(AUTH_EVENTS.loginFailed);  }); };javascript:void(0);})

我们注意到这里是缺少实际的逻辑的。这个 Controller 被做成这样，目的是使身份认证的逻辑跟表单解耦。把逻辑尽可能的从我们的 Controller 里面抽离出来，把他们都放到 services 里面，这是个很好的想法。AngularJS 的 Controller 应该只管理 $scope 里面的对象（用 watching 或者 手动操作）而不是承担过多过分重的东西。

通知 Session 的变化

身份认证会影响整个应用的状态。基于这个原因我更推荐使用事件（用 $broadcast）去通知 user session 的改变。把所有可能用到的事件代码定义在一个中间地带是个不错的选择。我喜欢用 constants 去做这个事情：

.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'})

constants 有个很好的特性就是他们能随便注入到别的地方，就像 services 那样。这样使得 constants 很容易被我们的 unit-test 调用。constants 也允许你很容易地在随后对他们重命名而不需要改一大串文件。同样的戏法运用到了 user roles: