Vue-login 案例的学习(一)

1. Token认证机制的原理

   ​ 如今对于网站的登录后都要做个验证，保护网站的安全；Token 是包含用户名、有效期和某些专有信息并通过共享密钥加密的信息字符串。

   ​ 1.1. Token的生成和存储问题

   ​ Token的生成一般采用uuid保证唯一性，当用户登录时为其生成一个唯一的Token，存储一般在数据库当中。

   ​ 1.2. Token过期时间的问题

   ​ 采用把Token二次保存在cookie和session中，根据cookie和session的过期时间来维护Token。

   ​ 1.3. 怎么保证用户使用状态下token持续时间的一直有效

   ​ 从cookie取出Token，获取用户信息；如果用户有操作权限，那么就会用当前的时间来更新cookies的过期时 间，从而维护Token的使用时间

​

1. 基于Token的身份验证方法

   使用基于 Token 的身份验证方法，在服务端不需要存储用户的登录记录。大概的流程是这样的：

   1. 客户端使用用户名跟密码请求登录

   2. 服务端收到请求，去验证用户名与密码

   3. 验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端

   4. 客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里

   5. 客户端每次向服务端请求资源的时候需要带着服务端签发的 Token

   6. 服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据

   ---

   ​

2. 实现Token验证的标准办法: JWT

   ​ JWT表示：JSON Web Tokens

   ​

   JWT的结构：

   ​ header部分

   ​ payload部分

   ​ signature部分

   ​

   JWT格式：

   中间用. 分隔开，并且使用Base64编码。类似：

   xxxxx.yyyyy.zzzzz；

   header部分：

   ​ header部分通常包含两个部分：Token类型和采用的加密算法(JWT类型和HS256算法)

   {
    "typ": "JWT",
    "alg": "HS256"
   }  

   使用Base64编码，header部分就变成了：

   eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

   ​

   ​

   payload部分：

   ​ payload部分是Token的主要内容，包含了claim,claim有三种类型：reserved（这些claim字段是JWT自带的，可选择使用） , public（根据需要定义自己的字段） 和 private（这些是自定义的字段，可以用来在双方之间交换信息） .

   例子：

     ```json
   

   {
   “sub”:”js”,//JWT定义的claim字段，意思：主题
   “name”:”lizi”,//自定义的claim字段
   “exp”:”1438955445”,//JWT定义的claim字段，意思：过期时间
   “age”:11//自定义的claim字段
   }
   “`

   ​

   signature部分：

   ​ 完成最后一个部分需要使用Base64编码后的header和payload部分以及一个密钥，生成Token步骤：

   ​ 先使用Base64编码header和payload。

   ​ 在使用加密算法（HS256算法）加密，在加密时，加入一个密钥。

   ​ 最后生成了signature部分。

   var encodedString = base64UrlEncode(header) + "." + base64UrlEncode(payload); 
   HMACSHA256(encodedString, 'secret');

   ​

   最后生成的Token类似如下：

   ​

   eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJuaW5naGFvLm5ldCIsImV4cCI6IjE0Mzg5NTU0NDUiLCJuYW1lIjoid2FuZ2hhbyIsImFkbWluIjp0cnVlfQ.SwyHTEx_RQppr97g4J5lKXtabJecpejuef8AqKYMAJc

   ​

   ​

   ​

   ​

   ​