vue和token的实现

vue+token步骤

1. 首先前后端实现交互，后端可以收到前端发送来的账号和密码
2. 后端验证用户名和密码，若通过——
3. 后端利用java的JWT创建Token工具类，然后在对于的Controller向前端返回token
4. 前端拿到token存储在localStorage和vuex中，并跳转路由页面
5. 前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面
6. 每次调后端接口，都要在请求头中加token
7. 后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（例如：token过期）就返回401，请求头中没有token也返回401
8. 如果前端拿到状态码为401，就清除token信息并跳转到登录页面

token定义

Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌。
当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。
防止因为后退或者刷新来重复提交表单内容的Token机制

token作用
Token的目的是为了减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮

token特点
Token，就是Token(令牌)机制，最大的特点就是随机性，不可预测。一般黑客或软件无法猜测出来。

Token一般用在两个地方:
1)防止表单重复提交、
2)anti csrf攻击（跨站点请求伪造）。

后端基于JWT的实现

JWT是什么

Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准（(RFC 7519).定义了一种简洁的，自包含的方法用于通信双方之间以JSON对象的形式安全的传递信息。因为数字签名的存在，这些信息是可信的，JWT可以使用HMAC算法或者是RSA的公私秘钥对进行签名。

1. 用户使用账号和面发出post请求；
2. 服务器使用私钥创建一个jwt；
3. 服务器返回这个jwt给浏览器；
4. 浏览器将该jwt串在请求头中像服务器发送请求；
5. 服务器验证该jwt；
6. 返回响应的资源给浏览器。

JWT的主要应用场景

1. Authorization（授权）：最常见的场景
   身份认证在这种场景下，一旦用户完成了登陆，在接下来的每个请求中包含JWT，可以用来验证用户身份以及对路由，服务和资源的访问权限进行验证。由于它的开销非常小，可以轻松的在不同域名的系统中传递，所有目前在单点登录（SSO) 中比较广泛的使用了该技术
   一旦用户登录，后续每个请求都将包含JWT，允许用户访问该令牌允许的路由、服务和资源。单点登录是现在广泛使用的JWT的一个特性，因为它的开销很小，并且可以轻松地跨域使用。
   

2. Infomation Exchange（信息交换）
   信息交换在通信的双方之间使用JWT对数据进行编码是一种非常安全的方式，由于它的信息是经过签名的，可以确保发送者发送的信息是没有经过伪造的。在安全的在各方之间传输信息的优势是源自JWTs可以被签名，例如，用公钥/私钥对，你可以确定发送人就是它们所说的那个人，由于签名是使用头和有效负载计算的，您还可以验证内容没有被篡改。

JWT结构

一个典型的JWT是如形式：xxxxx.yyyyy.zzzzz。
JSON Web Token由三部分组成，它们之间用圆点(.)连接。这三部分分别是：

1. Header
   header典型的由两部分组成：token的类型声明，声明为“JWT”和算法名称（比如：HMAC SHA256或者RSA等等）。

{
“alg”:“HS256”,
“typ”:“JWT”
}

加密算法是单向函数散列算法，常见的有MD5、SHA、HAMC。 MD5(message-digest algorithm 5)是信息-摘要算法缩写，广泛用于加密和解密技术，常用于文件校验。校验？不管文件多大，经过MD5后都能生成唯一的MD5值 SHA (Secure Hash Algorithm，安全散列算法），数字签名等密码学应用中重要的工具，安全性高于MD5 HMAC (Hash Message Authentication Code)，散列消息鉴别码，基于密钥的Hash算法的认证协议。用公开函数和密钥产生一个固定长度的值作为认证标识，用这个标识鉴别消息的完整性。常用于接口签名验证

2. Payload
   载荷就是存放有效信息的地方。
   有效信息包含三个部分

1.标准中注册的声明
2.公共的声明
3.私有的声明

详细说明
标准中注册的声明 (建议但不强制使用) ：
1、 iss: jwt签发者
2、sub: 面向的用户(jwt所面向的用户)
2、aud: 接收jwt的一方
3、exp: 过期时间戳(jwt的过期时间，这个过期时间必须要大于签发时间)
4、nbf: 定义在什么时间之前，该jwt都是不可用的.
5、iat: jwt的签发时间
6、jti: jwt的唯一身份标识，主要用来作为一次性token,从而回避重放攻击。
公共的声明 ：
公共的声明可以添加任何的信息，一般添加用户的相关信息或其他业务需要的必要信息。但不建议添加敏感信息，因为该部分在客户端可解密。
私有的声明 ：
私有声明是提供者和消费者所共同定义的声明，一般不建议存放敏感信息，因为base64是对称解密的，意味着该部分信息可以归类为明文信息。

3. Signature
   jwt的第三部分是一个签证信息，这个签证信息由三部分组成：

header (base64后的)， payload (base64后的) 和secret

这个部分需要base64加密后的header和base64加密后的payload使用.连接组成的字符串，然后通过header中声明的加密方式进行加盐secret组合加密，然后就构成了jwt的第三部分。密钥secret是保存在服务端的，服务端会根据这个密钥进行生成token和进行验证，所以需要保护好。

官网对于JWT结构展示的图片

JWT优点

1.简洁(Compact): 可以通过URL，POST参数或者在HTTP header发送，因为数据量小，传输速度也很快
2.自包含(Self-contained)：负载中包含了所有用户所需要的信息，避免了多次查询数据库
3.因为Token是以JSON加密的形式保存在客户端的，所以JWT是跨语言的，原则上任何web形式都支持。
4.不需要在服务端保存会话信息，特别适用于分布式微服务。

参照二个文章写后端token
https://www.cnblogs.com/shihaiming/p/9565835.html
https://www.cnblogs.com/aaron911/p/11300062.html
https://www.cnblogs.com/zxcoder/p/11964433.html

前端
https://blog.csdn.net/weixin_42754905/article/details/107958161?utm_term=%E5%89%8D%E7%AB%AF%E6%80%8E%E4%B9%88%E6%8B%BF%E5%88%B0%E5%90%8E%E7%AB%AF%E7%BB%99%E7%9A%84token&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2_allsobaiduweb~default-1-107958161&spm=3001.4430

https://www.cnblogs.com/web-record/p/9876916.html

https://blog.csdn.net/qq_42552393/article/details/103536328?utm_term=vue+++token&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2_allsobaiduweb~default-0-103536328&spm=3001.4430

学习自文章

1、https://www.cnblogs.com/aaron911/p/11300062.html
2、https://www.cnblogs.com/shihaiming/p/9565835.html
3、 https://www.jianshu.com/p/fe67b4bb6f2c
4、https://jwt.io/