AngularJS是一个开源的前端MVC框架，有Google进行维护，可以说是现在最火的前端框架，没有之一，而紧随其后的有EmberJs，Backbone,React等。而React也算是最近的一个大热门，有Facebook产出，之后有时间也会去了解一下。
为什么使用AngularJs
前端框架有前端框架的好处，从我自身使用的一个小项目出发，说一下AngularJs的优点吧，
- html为其自带的模板，并不像其他可能会用ejs,jade等其他模板作为标配。Angualr本身就以html为模板。
- Angular双向绑定功能，可以很简单的实现数据更新，获取
- Angular可以大大节约开发时间，适合单兵作战
更多内容大家可以点击Angular.key 以及AngularJS理论与实战.ppt 前者是我之前做的一个用于技术分享的keynote，里面还有一个文件上传的例子。后者是InfoQ的大神写的。两者不可同日而语，之所以把我的keynote也放在上面仅仅是想证明存在感 ：）.
何为安全路由
写服务器端的同学可能会更多的了解，一些API是有权限设置的，普通用户不能访问管理员用户API，未登录用户不能访问登陆用户的API。这在后端是很常见的，但是对于Angular这种单页面APP来说这也是很重要的。因为先跳转到页面判断有没有权限，再跳回来说没有权限，用户体验是很差的，所以我们需要在前端就进行处理。
Angular实现准备知识点
在Angular实现的过程中我们会用到的知识点
Run方法
上面是官方文档的解释，当每次加载注入的module的时候都会先运行run里面的代码，这也是我们要实现的关键点之一
$cookieStore
$cookieStore我们用来保存cookie的一个全局变量，也是Angular自带方法之一,用来全局保存一些cookie token等信息
factory方法
这是Angular自带的方法之一，使用此方法可以构建全局的Service
controller方法
MVC中的C用于每个页面的数据控制
具体实现代码
1、首先我们要做的就是一个写一个单例的Service。用于保存用户资料，以及用户的一系列数据操作
angular.module('publicApp')
.factory('Auth', function Auth($location, $rootScope, $http, User, $cookieStore, $q) {
var currentUser = {};
if($cookieStore.get('token')) {
currentUser = User.get();
}
return {
/**
* Authenticate user and save token
*
* @param {Object} user - login info
* @param {Function} callback - optional
* @return {Promise}
*/
login: function(user, callback) {
var cb = callback || angular.noop;
var deferred = $q.defer();
$http.post('/users/login', {
username: user.name,
password: user.pswd
}).
success(function(data) {
console.log(data);
$cookieStore.put('token', data.token);
currentUser = User.get();
deferred.resolve(data);
return cb(undefined, data);
}).
error(function(err) {
this.logout();
deferred.reject(err);
return cb(err);
}.bind(this));
return deferred.promise;
},
/**
* Delete access token and user info
*
* @param {Function}
*/
logout: function() {
$cookieStore.remove('token');
currentUser = {};
},
/**
* Create a new user
*
* @param {Object} user - user info
* @param {Function} callback - optional
* @return {Promise}
*/
createUser: function(user, callback) {
var cb = callback || angular.noop;
return User.save(user,
function(data) {
$cookieStore.put('token', data.token);
currentUser = User.get();
return cb(user);
},
function(err) {
this.logout();
return cb(err);
}.bind(this)).$promise;
},
/**
* Change password
*
* @param {String} oldPassword
* @param {String} newPassword
* @param {Function} callback - optional
* @return {Promise}
*/
changePassword: function(oldPassword, newPassword, callback) {
var cb = callback || angular.noop;
return User.changePassword({ id: currentUser._id }, {
oldPassword: oldPassword,
newPassword: newPassword
}, function(user) {
return cb(user);
}, function(err) {
return cb(err);
}).$promise;
},
/**
* Gets all available info on authenticated user
*
* @return {Object} user
*/
getCurrentUser: function() {
return currentUser;
},
/**
* Check if a user is logged in
*
* @return {Boolean}
*/
isLoggedIn: function() {
return currentUser.hasOwnProperty('role');
},
/**
* Waits for currentUser to resolve before checking if user is logged in
*/
isLoggedInAsync: function(cb) {
if(currentUser.hasOwnProperty('$promise')) {
currentUser.$promise.then(function() {
cb(true);
}).catch(function() {
cb(false);
});
} else if(currentUser.hasOwnProperty('role')) {
cb(true);
} else {
cb(false);
}
},
/**
* Check if a user is an admin
*
* @return {Boolean}
*/
isAdmin: function() {
return currentUser.role === 'admin';
},
/**
* Get auth token
*/
getToken: function() {
return $cookieStore.get('token');
}
};
});
上面的代码中我们创建了一个全局的Service Auth 实现了获取信息，信息报错，获取token，判断是否
登录等一系列方法接下来我们主要用的是login和isLoggedInAsync方法
angular.module('publicApp')
.factory('User', function ($resource) {
return $resource('/:id/:controller', {
id: '@_id'
},
{
changePassword: {
method: 'PUT',
params: {
controller:'password'
}
},
get: {
method: 'GET',
params: {
id:'me'
}
}
});
});
user Service
2、route中在需要校验的route中加校验字段
angular.module('publicApp').config(['$routeProvider', function ($routerProvider) {
$routerProvider.when('/',{
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/setting',{templateUrl:'views/setting.html', controller: 'settingCtl',authenticate: true})
.when('/register',{templateUrl:'views/register.html', controller: 'loginCtl'});
}]);
请注意setting的中authenticate字段，表示这个路由需要校验
3、配置Run方法
angular
.module('publicApp', [
'ngAnimate',
'ngSanitize',
'ngTouch',
'ngRoute',
'ngResource',
'ngCookies'
]).run(function ($rootScope, $location, Auth) {
// Redirect to login if route requires auth and you're not logged in
$rootScope.$on('$routeChangeStart', function (event, next) {
Auth.isLoggedInAsync(function(loggedIn) {
if (next.authenticate && !loggedIn) {
$location.path('/');
}
});
});
});
$rootScope.$on('$routeChangeStart', function (event, next) {})这个方法就是指当有路由切换的时候，会触发下面的方法，当next.authenticate并且 没有login的话就跳转到指定的页面。经过上面几步我们就实现了了简单的安全路由了.
网友评论