前端token中4个存储位置的优缺点说明

一、token是什么 

Token: 访问资源的凭证。

一般用户通过用户名密码登录后，服务端会将登录凭证做数字签名，加密之后的字符串作为Token。

并在客户端后面的向服务端的请求中携带，作为凭证。

二、token一般存放在哪里？

token 在客户端一般存放于localStorage、cookie、或sessionStorage，vuex中。

1、localStorage

• 优点： localStorage 生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。相同浏览器的不同页面间可以共享相同的localStorage (页面属中相可域名和端口)。
• 缺点：同一个属性名的数据会被替换，不同浏览器无法共享localStorage或sessionStorage中的信息。

2、sessionStorage

• 优点： sessionStorage生 命周期为当前窗口或标签页，sessionStorage的数据不会被其他窗口清除，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。
• 缺点：一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

将token存放在webstroage中，可以通过同域的js来访问。这样会导致很容易受到 XSS攻击，特别是项目中引入很多 第三方js类库的情况下。如果js脚本被盗用，攻击者就 可以轻易访问你的网站，webStroage作为一种储存机制，在传输过程中不会执行任何安全标准。

XSS攻击：cross-site Scripting (跨站脚本攻击） 是一种注入代码攻击。恶意攻击者在目标网站生注入script代码，当访问者浏览网站的时候通过执行注入的script代码达到窃取用户信息，盗用用户身份等。

3、存储在cookie 中

让它自动发送，不过缺点就是不能跨域

将token存放在cookie中可以指定httponly，来防止被javascript读取，也可以指定secure ，来保证token只在HTTPS下传输。缺点是不符合Restful 最佳实践，容易受到CSRF攻击。

CSRF跨站点请求伪造(Cross-Site Request Forgery)，跟XSS攻击一样，存在巨大的危害性。

简单来说就是恶意攻击者盗用已经认证过的用户信息，以用户信息名义进行一些操作（如发邮件、转账、购买商品等等）。由于身份已经认证过，所以目标网站会认为操作都是真正的用户操作的。CSRF并不能拿到用户信息，它只是盗用的用户凭证去进行操作。

4、Vuex

• 优点：vuex的数据存储在内存中，保密性较高
• 缺点：刷新页面(这里 的刷新页面指的是--> F5刷新,属于清除内存了)时vuex存储的值会丢失

总结：也就是说,localStorage可存储持久化的数据;sessionStorage仅限于当前窗口;vuex可存储保密性较高的数据，但刷新页面后数据会被清除.

三、token基本流程

（1）用户登陆,发送手机号码和验证码

（2）后台接收参数,查找用户,用户存在就生成token,返回给前端

（3）前端登陆成功,把token存到vuex(做持久化)

（4）使用axios拦截器,读取vuex中的token,并放入请求头

（5）请求其他接口,就会带上token

（6）后台在需要登陆的接口上,获取token,解密token获得userId,返回前端需要的数据

（7）用户在下次使用app,如果token还在有效期内,不需要重新登陆

客户端使用用户名跟密码去请求登陆，服务度段收到请求，去验证用户名和密码，验证成功后，服务端会签发一个token，再把这个token发送给客户端，客户顿收到token之后能够把它存储起来，

好比放在cookie里面或者local storage里面，客户端每次向服务端请求资源的时候须要带上服务端签发的token，服务端收到请求，而后去验证客户端请求里面带着的token，若是验证成功，以某种方式好比随机生成32位的字符串做为token，存储在服务器中，并返回token到APP，

之后APP请求时，凡是须要验证的地方都要带上该token，而后服务端验证token，成功返回所须要的结果，失败返回错误信息，从新登陆，服务器上的token设置一个有效期，每次APP请求时都要验证token和有效期。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持0133技术站。