Token与LocalStorage

什么是Token?

token的意思是“令牌”，是服务端生成的一串字符串，作为客户端进行请求的一个标识。

1. 当用户第一次登录后，服务器生成一个token并将此token返回给客户端，以后客户端只需带上这个token前来请求数据即可，无需再次带上用户名和密码。
2. 简单token的组成；uid(用户唯一的身份标识)、time(当前时间的时间戳)、sign（签名，token的前几位以哈希算法压缩成的一定长度的十六进制字符串。为防止token泄露）。

为什么要有Token?

Token的目的是为了减轻服务器的压力，减少频繁的查询数据库。

Token在项目中的应用逻辑

在前后端完全分离的情况下：

1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码

2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token

3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面

4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面

5、每次调后端接口，都要在请求头中加token

6、后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（例如：token过期）就返回401，请求头中没有token也返回401

7、如果前端拿到状态码为401，就清除token信息并跳转到登录页面

什么是localStorage?

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。
localStorage的使用：

//看浏览器是否支持localStorage
if(！window.localStorage){
            alert("浏览器支持localstorage");
            return false;
        }else{
            //主逻辑业务

            //增
            var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.a=1;
            //写入c字段
            storage.setItem("c",3);
			
			//查
			//第一种方法读取
            var a=storage.a;
            console.log(a);
            //第二种方法读取
            var b=storage["b"];
            console.log(b);
            //第三种方法读取
            var c=storage.getItem("c");
            console.log(c);

			//改
            storage["a"]=1;
            //写入b字段
            storage.b=1;
            //写入c字段
            storage.setItem("c",3);
            console.log(storage.a);
            /*分割线*/
            storage.a=4;
            console.log(storage.a);
            
			//删
			//全部删除
			storage.clear();
			//按照键值删除
			storage.removeItem("a");
			
			//localStorage的键获取
			var storage=window.localStorage;
            storage.a=1;
            storage.setItem("c",3);
            for(var i=0;i<storage.length;i++){
                var key=storage.key(i);
                console.log(key);
            }
        }

localStorage注意事项：

1. 一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式，这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串。
2. 读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法，转出来的是Object格式。

本文参考：https://blog.csdn.net/zhangchen124/article/details/87210895