关闭

AngularJS如何做身份验证

4204人阅读 评论(0) 收藏 举报
分类:

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


一个简单的例子:

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中验证身份的整个逻辑。

原文链接:http://blog.brunoscopelliti.com/deal-with-users-authentication-in-an-angularjs-web-app#




0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:541674次
    • 积分:6787
    • 等级:
    • 排名:第3404名
    • 原创:119篇
    • 转载:74篇
    • 译文:3篇
    • 评论:138条
    文章分类
    最新评论