一篇文章带你了解什么是Token

Token的作用及原理

1、什么的Token

Token是首次登陆时由服务器下发，作为客户端进行请求的一个令牌，当交互时用于身份验证的一种验证机制，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。

2、Token的作用

Token完全由应用程序进行管理，所以它可以避开同源策略
Token可以避免CSRF（跨站请求访问）攻击
Token可以是无状态的，可以在多个服务器之间共享
使用Token减轻服务器的压力，减少频繁的查询数据库。

3、Token身份认证的过程

用户通过用户名和密码发送请求
程序进行验证
程序返回一个签名的token给客户端
客户端进行存储token，并且用于每次发送请求
服务器端进行验证token并返回数据

4、Token的存储位置

存储在localStorage中

// 存储token到ls const { token } = res.data; window.localStorage.setItem('jwtToken', token);

优点：没有时间限制的存储，会一直存放在浏览器中。

缺点：由于LocalStorage 可以被 javascript 访问，所以容易受到XSS攻击。所以可以在一个统一的地方复写请求头，让每次请求都在header中带上这个token，当token失效的时候，后端会返回401，这个时候在你可以在前端代码中操作返回登陆页面，清除localstorage中的token。（适用于 ajax请求或者 api请求，可以方便的存入 localstorage）另外，需要应用程序来保证Token只在HTTPS下传输。

存储在cookie中

优点：可以防止 csrf攻击，因为 csrf只能在请求中携带 cookie，而这里必须从 cookie中拿出相应的值并放到 authorization 头中。实际上cookie不能跨站（同源策略）被取出，因此可以避免 csrf 攻击。（适用于 ajax请求或者 api请求，可以方便的设置 auth头）

5、Token处理过期时间

在我的vue项目中，我将Token存储在了localStorage中，有处理过Token过期，我是这样做的：

created() {
    if (localStorage.jwtToken) {
      const decoded = jwt_decode(localStorage.jwtToken);
      //获取当前时间
      const currentTime = Date.now() / 1000;
      //检测token是否过期
      if (decoded.exp < currentTime) {
        //跳转到登录页面
        this.$router.push('/login');
        //其他处理
        ...
      } else{
        //没有过期的处理;
      }   
    }