AngularJS是一個(gè)開源的前端MVC框架，有Google進(jìn)行維護(hù)，可以說(shuō)是現(xiàn)在最火的前端框架，沒有之一，而緊隨其后的有EmberJs，Backbone,React等。而React也算是最近的一個(gè)大熱門，有Facebook產(chǎn)出，之后有時(shí)間也會(huì)去了解一下。
為什么使用AngularJs
前端框架有前端框架的好處，從我自身使用的一個(gè)小項(xiàng)目出發(fā)，說(shuō)一下AngularJs的優(yōu)點(diǎn)吧，
- html為其自帶的模板，并不像其他可能會(huì)用ejs,jade等其他模板作為標(biāo)配。Angualr本身就以html為模板。
- Angular雙向綁定功能，可以很簡(jiǎn)單的實(shí)現(xiàn)數(shù)據(jù)更新，獲取
- Angular可以大大節(jié)約開發(fā)時(shí)間，適合單兵作戰(zhàn)
更多內(nèi)容大家可以點(diǎn)擊Angular.key 以及AngularJS理論與實(shí)戰(zhàn).ppt 前者是我之前做的一個(gè)用于技術(shù)分享的keynote，里面還有一個(gè)文件上傳的例子。后者是InfoQ的大神寫的。兩者不可同日而語(yǔ)，之所以把我的keynote也放在上面僅僅是想證明存在感 ：）.
何為安全路由
寫服務(wù)器端的同學(xué)可能會(huì)更多的了解，一些API是有權(quán)限設(shè)置的，普通用戶不能訪問管理員用戶API，未登錄用戶不能訪問登陸用戶的API。這在后端是很常見的，但是對(duì)于Angular這種單頁(yè)面APP來(lái)說(shuō)這也是很重要的。因?yàn)橄忍D(zhuǎn)到頁(yè)面判斷有沒有權(quán)限，再跳回來(lái)說(shuō)沒有權(quán)限，用戶體驗(yàn)是很差的，所以我們需要在前端就進(jìn)行處理。
Angular實(shí)現(xiàn)準(zhǔn)備知識(shí)點(diǎn)
在Angular實(shí)現(xiàn)的過(guò)程中我們會(huì)用到的知識(shí)點(diǎn)
Run方法
上面是官方文檔的解釋，當(dāng)每次加載注入的module的時(shí)候都會(huì)先運(yùn)行run里面的代碼，這也是我們要實(shí)現(xiàn)的關(guān)鍵點(diǎn)之一
$cookieStore
$cookieStore我們用來(lái)保存cookie的一個(gè)全局變量，也是Angular自帶方法之一,用來(lái)全局保存一些cookie token等信息
factory方法
這是Angular自帶的方法之一，使用此方法可以構(gòu)建全局的Service
controller方法
MVC中的C用于每個(gè)頁(yè)面的數(shù)據(jù)控制
具體實(shí)現(xiàn)代碼
1、首先我們要做的就是一個(gè)寫一個(gè)單例的Service。用于保存用戶資料，以及用戶的一系列數(shù)據(jù)操作
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');
}
};
});
上面的代碼中我們創(chuàng)建了一個(gè)全局的Service Auth 實(shí)現(xiàn)了獲取信息，信息報(bào)錯(cuò)，獲取token，判斷是否
登錄等一系列方法接下來(lái)我們主要用的是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中在需要校驗(yàn)的route中加校驗(yàn)字段
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'});
}]);
請(qǐng)注意setting的中authenticate字段，表示這個(gè)路由需要校驗(yàn)
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) {})這個(gè)方法就是指當(dāng)有路由切換的時(shí)候，會(huì)觸發(fā)下面的方法，當(dāng)next.authenticate并且 沒有l(wèi)ogin的話就跳轉(zhuǎn)到指定的頁(yè)面。經(jīng)過(guò)上面幾步我們就實(shí)現(xiàn)了了簡(jiǎn)單的安全路由了.
