AngularJS如何做身份验证

如果要在客户端使用AngularJS做身份验证的话，推荐使用service来做，因为service是单例的，可以很方便的在所有view，controller，directives，filters和其他service中共享数据，而不用采取暴露全局变量的方式，封装性也有一定的保障。带你走近AngularJS系列：

带你走近AngularJS - 基本功能介绍 http://www.linuxidc.com/Linux/2014-05/102140.htm
带你走近AngularJS - 体验指令实例 http://www.linuxidc.com/Linux/2014-05/102141.htm
带你走近AngularJS - 创建自定义指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

如何在 AngularJS 中对控制器进行单元测试 http://www.linuxidc.com/Linux/2013-12/94166.htmAngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm一个简单的例子：services.factory（"UserService", [function（） {
var sdo = {
isLogged: false,
username: ""
};
return sdo;
}]）;AngularJS中使用service都是通过依赖声明的方式来做的，比如：var controllers = angular.module（"myApp.controllers", []）;/* ... */controllers.controller（"loginController", ["$scope", "$http", "UserService", function（scope, $http, User） {}]）;在这个loginController里我们可以定义一个login function来向服务器验证用户身份：scope.login = function（） {
var config = { /* ... */ } // configuration object $http（config）
.success（function（data, status, headers, config） {
if （data.status） {
// succefull login
User.isLogged = true;
User.username = data.username;
}
else {
User.isLogged = false;
User.username = "";
}
}）
.error（function（data, status, headers, config） {
User.isLogged = false;
User.username = "";
}）;
}接着，只要声明依赖了UserService的任何controller，view，filter等都可以通过UserService.isLogged来判断用户是否是已经验证过的，或者匿名用户
由于AngularJS通常会使用template把页面拆分重组，此时使用routeProvider来控制各个页面的访问规则：app.config（["$routeProvider", function（$routeProvider） {
$routeProvider.when（"/login", { templateUrl: "partials/login.html", controller: "loginCtrl" , access: {isFree: true}}）;
$routeProvider.when（"/main", { templateUrl: "partials/main.html", controller: "mainCtrl" }）;
$routeProvider.otherwise（{ redirectTo: "/main" }）;
}]）;有的页面是无需身份验证就可以访问的，例如login.html，有的页面是需要登录用户才能够看到的，例如main.html，此时我们就需要通过增加通用的checkUser逻辑来判断当前用户是否能看到这些页面：directives.directive（"checkUser", ["$rootScope", "$location", "userSrv", function （$root, $location, userSrv） {
return {
link: function （scope, elem, attrs, ctrl） {
$root.$on（"$routeChangeStart", function（event, currRoute, prevRoute）{
if （！prevRoute.access.isFree && ！userSrv.isLogged） {
// reload the login route
}
/*
* IMPORTANT:
* It"s not difficult to fool the previous control,
* so it"s really IMPORTANT to repeat the control also in the backend,
* before sending back from the server reserved information.
*/
}）;
}
}
}]）;这个directive注册在了rootScope上，并且监听了routeChangeStart，也是一种AOP的概念，在route change发生之前，织入了一个切面，来判断用户身份权限。由此，来达到在AngularJS中验证身份的整个逻辑。AngularJS 的详细介绍：请点这里
AngularJS 的下载地址：请点这里本文永久更新链接地址：http://www.linuxidc.com/Linux/2014-05/102180.htm