简单描述一下token的作用和【vue】以登录token为例，理解vuex状态管理使用？

简单描述一下token的作用和【vue】以登录token为例，理解vuex状态管理使用？

需求：
因为HTTP协议是无状态协议，所以我们用户登录以后，访问一些带权限的页面，就无发判断能否给用户展示（比如会员资源）。

Cookie曾一度用于客户信息数据的存储，但由于服务器指定Cookie后，浏览器的每次请求都会携带Cookie数据，会带来额外的性能开销，Cookie渐渐被淘汰。

一般判断用户的身份有两种通用的方式：一种是cookie+session的模式;
cookie+session的模式身份验证：
用户输入账号和密码等登陆凭据后；
后端服务器php，java等，会验证凭据是否正确，返回一个sessionID值，存储到数据库redis里面；
然后通过一些set-cookie响应头发送给前端，浏览器将cookie存放在浏览器中；
然后每次发请求，浏览器都会自动在request header请求头中携带cookie这个参数；
服务器端验证通过才会继续处理。

因为由于同源策略以前的cookie不能跨域，所以我们现在使用比较流行的token方案。

token身份验证：
用户输入账号和密码等登陆凭据后；
后端服务器php，java等，会验证凭据是否正确，然后返回一个经过签名的token；
客户端负责存储token，可以存在localstorage中；
对服务器的请求带上这个token；
服务器对JWT进行解码，如果token有效，则处理该请求；
一旦用户登出，客户端销毁token。

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

Vue项目里Vuex是一种状态（数据）管理模式（工具），对组件的公共状态进行集中管理。这些状态是全局的，但Vuex 和单纯的全局对象有以下两点不同：

    1.Vuex的状态存储是响应式的。 Vue组件从store中读取状态时，若store中的状态发生变化，那么相应的组件也会更新。
    2.不能直接改变store中的状态。改变store中状态的唯一途径是提交mutation。

使用场景：

我之前主要是vue里面的项目，写这个比较多，用于网站登录状态保持。业务流程是，用户通过用户名密码登录成功以后，后台根据提交的数据生成token返回给前端，我们将token值保存在vuex状态管理里面， 数据持久化（localStorage的操作放到mutation里面）也放在vuex里面。 

使用vuex有什么好处？ Vuex的状态存储是响应式的，可以让我们的页面数据和视图同步更新；如果使用本地储存的话，还需要再设置一个data上面的数据，才能实现响应式，所有我们项目里面的token采用的是vuex。

位置：
在我们自己用axios创建的一个实例上面的请求拦截器interceptors里面，在每次请求接口时，都将token添加到请求白名单（比如登录，注册，发验证码一些接口，是不需要身份的，进行白名单过滤处理）以外的url地址请求头authorization中；（以前我们还在请求拦截器里面做过进度条的显示 nprogress.start()轻量化顶部进度条效果）