一、token，服务端身份验证
token是一种身份验证的机制，初始时用户提交账号数据给服务端，服务端采用一定的策略生成一个字符串（token），token字符串中包含了少量的用户信息，并且有一定的期限。服务端会把token字符串传给客户端，客户端保存token字符串，并在接下来的请求中带上这个字符串。
Token工作流程
使用基于Token的身份认证方法，在服务器端不需要存储用户的登录记录。
流程如下：
1.客户端使用用户名和密码登录。
2.服务端收到请求去验证用户名和密码
3.验证成功后服务器端会签发一个token，再把这个token发送给客户端。
4.客户端收到token后可以把它存起来
5.用户每次发起请求都需带着服务端签发的token。
6.服务端收到请求后去验证客户端里边带着的token，如果验证成功，就返回需要的数据。
二、数据存储
sessionStorage 、localStorage 和 cookie 之间的区别
共同点：都是保存在浏览器端，且同源的。
区别：
（1）数据传输方面：
在每个http请求中都会附加cookie信息，cookie中的信息能够被推送到服务器端；
而sessionStorage和localStorage不会被推送到服务器端。
（2）存储大小不同：
cookie最大支持4KB，而sessionStorage和localStorage一般在2.5~10MB
（3）生命周期：
默认情况下，cookie开始于浏览器启动，结束于浏览器关闭，但是可以手动设置cookie的过期时间，同时，到期后被删除；
而对于localStorage，没有过期时间，原则上只要不手动删除，其会一直被保存在本地上；sessionStorage的数据关闭浏览器时清除
（4）被创造的初衷不同：
sessionStorage和localStorage都属于WebStorage，创建他们的目的就是用于存储客户端数据；
而cookie最早在网景的浏览器中被支持，主要目的是为了辨别用户身份而存储在本地终端的数据。
三、项目实践
一、登录页面：
用户信息
1、存储用户名，密码
localStorage.setItem('Auth', $base64.encode(credentials.username + ':' + credentials.password))
读取信息
var Auth = localStorage.getItem("Auth")
2、验证码，通过 code值来做判断（需求：默认没有验证，超过三次出现验证码）
localStorage来做验证码判断：
localStorage.setItem("code", 1); //写入数据
var flog = localStorage.getItem("code"); //读出数据
if (flog > 3) {
$rootScope.loginyanzheng = true;
} else if (flog <= 3 || !flog) {
$rootScope.loginyanzheng = false;
}
3、用户名，密码 成功后，通过Cookie操作token
用Cookie获取token Cookie.set('df_access_token', arrstr, 24 * 3600 * 1000);
二、通过JS设置cookie、读取cookie
.service('Cookie', [function () {
//设置cookie
this.set = function (key, val, expires) {
var date = new Date();
date.setTime(date.getTime() + expires);
document.cookie = key + "=" + val + "; expires=" + date.toUTCString();
};
//获取cookie
this.get = function (key) {
var reg = new RegExp("(^| )" + key + "=([^;]*)(;|$)");
var arr = document.cookie.match(reg);
if (arr) {
return (arr[2]);
}
return null
};
//清除cookie
this.clear = function (key) {
this.set(key, "", -1);
};}])
注：因为项目是angular框架，也可以用插件angular-cookie。
用Cookie存储与读取token
//将date设置为10天以后的时间
var expireDays=10;
Cookie.set('df_access_token', arrstr, expireDays * 24 * 3600 * 1000);
console.log(Cookie.get('df_access_token'));
cookie操作相关地址：http://www.jb51.net/article/79967.htm
四、加密技术
处理数据，前端没有绝对安全
（建议：前端与后端都需要做加密这块，base64、md5，账号\密码都加密）
处理数据，解密base64，md5，rc4
Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一，大家可以查看RFC2045～RFC2049，上面有MIME的详细规范。Base64编码可用于在HTTP环境下传递较长的标识信息。此时，采用Base64编码具有不可读性，即所编码的数据不会被人用肉眼所直接看到。
MD5即Message-Digest Algorithm 5（信息-摘要算法5），用于确保信息传输完整一致。是计算机广泛使用的杂凑算法之一（又译摘要算法、哈希算法），主流编程语言普遍已有MD5实现。将数据（如汉字）运算为另一固定长度值，是杂凑算法的基础原理，MD5的前身有MD2、MD3和MD4。
RC4加密算法是大名鼎鼎的RSA三人组中的头号人物Ronald Rivest在1987年设计的密钥长度可变的流加密算法簇。之所以称其为簇，是由于其核心部分的S-box长度可为任意，但一般为256字节。该算法的速度可以达到DES加密的10倍左右，且具有很高级别的非线性。RC4起初是用于保护商业机密的。但是在1994年9月，它的算法被发布在互联网上，也就不再有什么商业机密了。RC4也被叫做ARC4（Alleged RC4——所谓的RC4），因为RSA从来就没有正式发布过这个算法。
base64 加密/解密工具
http://tool.chinaz.com/Tools/Base64.aspx
网友评论