NodeJS实现JWT原理

1.会话管理

我们用nodejs为前端或者其他服务提供resful接口时，http协议他是一个无状态的协议，有时候我们需要根据这个请求的上下文获取具体的用户是否有权限，针对用户的上下文进行操作。所以出现了cookies session还有jwt这几种技术的出现， 都是对HTTP协议的一个补充。使得我们可以用HTTP协议+状态管理构建一个的面向用户的WEB应用。

2.session和cookies

个人理解，cookie是靠session_id完成服务端与客户端的通信的，当我们第一次登录时，服务端会去寻找我们的登录信息，然后将登录信息回写到cookie中，而session_id就是我们寻找登录信息的一个标识。

有几点需要注意一下：
1.cookie数据存放在客户的浏览器上，session数据放在服务器上。
2.cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗,考虑到安全应当使用session。
3.session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能,考虑到减轻服务器性能方面，应当使用cookie。
4.单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie，而session则存储与服务端，浏览器对其没有限制。
5.cookie在多个站点下会存在跨域问题。

3.JWT定义

JWT全称（json web token），就是我们开发中常用到的Token。

4.JWT原理

既然Token是对Http协议的一个补充，可以说代替Cookie，那么Token也是要存储用户信息的，而在cookie中都是以键值对形式存储的：比如(name=‘lgh’; )一定是以分号加一个空格结尾，而Token一般是服务端返回给客户端的一个JSON，但是我们与服务端通信的时候，往往这个JSON会加上签名（也就是一串你不认识的英文，服务端认识）。

5.JWT认证流程

浏览器发起请求登陆，携带用户名和密码；
服务端根据用户名和明码到数据库验证身份，根据算法，将用户标识符打包生成 token,
服务器返回JWT信息给浏览器，JWT不应该包含敏感信息，这里有一个加密过程，这是很重要的一点。
浏览器发起请求获取用户资料，把刚刚拿到的 Token一起发送给服务器，一般放在header里面。
服务器发现数据中有 Token，服务端对Token解密，然后去对比，验证通过。
服务器返回该用户的用户资料。
服务器可以在payload设置过期时间， 如果过期了，可以让客户端重新发起验证。

6.代码实现（Vue+NodeJS+MySql）

场景：比如我现在正在做的一个商城项目，一般首页，产品页，给客户看得界面，都是不需要身份校验的，我们逛淘宝京东，就算没有登录我们也能浏览商品，但是当我们点购买，点击购物车一些入口时，这时候是需要身份校验的，你必须登录了才能看自己购物车信息，才能购买商品。还有一点，cookie存储在客户端，我们会话窗口一关，cookie就没了，然后我们再去点购物车，服务端肯定需要我们再次登录。Token就是解决了这个问题。

1.连接数据库
这里我就简单写了两张表，一张user，一张cart

2.搭建服务器
app.js

const express = require('express');
const bodyParser = require('body-parser');
const cors=require("cors");
// 引入路由模块（用户）
const user=require("./routes/users");
/*引入token的模块*/
const jwt=require("./jwt.js")
const app = express();
app.listen(8080);
app.use(cors({
  origin:['http://localhost:8081'],
  credentials:true
}));

3.连接池
pool.js

//创建mysql连接池
const mysql = require('mysql');
const pool = mysql.createPool({
  host: '127.0.0.1',
  user: 'root',
  password: '',
  database: 'user',
  connectionLimit: 10 
});
//把创建好的连接池导出
module.exports = pool;

4.JWT模块（Token）
进入路由模块之前，需要用到一个签名工具。(私钥加密、公钥解密)
这里我也写好了

// 引入模块依赖
const fs = require('fs');
const path = require('path');
const jwt = require('jsonwebtoken');
//生成token
function generateToken(data){
	// 随机生成一个时间戳
    let created = Math.floor(Date.now() / 1000);
    // 读取硬盘上的私钥文件，利用jwt对其签名，这里会生成token
    let cert = fs.readFileSync(path.join(__dirname, './pem/rsa_private_key.pem'));//私钥 可以自己生成
    let token = jwt.sign({
        data, // 需要加密的用户信息
        exp: created + 60 * 60,// 设置token过期时间
    }, cert, {algorithm: 'RS256'}); // 这是一个签名算法，这里不过多介绍
    return token;
}
// 校验token
function verifyToken(token) {
    let cert = fs.readFileSync(path.join(__dirname, './pem/rsa_public_key.pem'));//公钥 可以自己生成
    let res;
    try {
        if(token!==undefined){
            let result = jwt.verify(token, cert, {algorithms: ['RS256']}) || {};
            res = result.data || {};
        }
    } catch (e) {
        res = e;
    }
    return res;
}

module.exports = { generateToken, verifyToken };

加密解密模块就完成了，我们需要把方法暴露出来用module.exports方法

5.路由模块（接口）
user.js

const express=require("express");
const router=express.Router();
const pool=require("../pool");
const jwt=require("../jwt.js")
// 登录接口
router.post("/islogin",(req,res)=>{
  var {uname,upwd,remember}=req.body;
  var sql="select * from user_user where uname=? and binary upwd=?";
  pool.query(sql,[uname,upwd],(err,result)=>{
    err&&console.log(err);
    if(result.length>0){
      res.write(JSON.stringify({
        ok:1,uname:result[0]['uname'],
        remember:remember||false,
        token:jwt.generateToken(result[0])
      }));
    }else{
      res.write(JSON.stringify({ok:0,msg:"用户名或密码错误!"}));
    }
    res.end();
  })
})
// 购物车接口
router.get("/orders",(req,res)=>{
  var aid=req.user.uid
  if(aid==null){
    res.write(JSON.stringify({ok:0}));
    res.end();
  }else{
    var sql="select * from user_order where aid=?";
    pool.query(sql,[aid],(err,result)=>{
      res.write(JSON.stringify({ok:1,data:result[0]}));
      res.end();
    })
  }
})
module.exports=router;

6.Vue模块
在Vue里面我们需要考虑两个东西，
第一个是界面（简单的做了一下）
第二个是Axios
因为在访问个人，购物车等入口时，我们需要在每次请求中带上Token向后端发请求，每次都写Token太麻烦了，所以这里就用到了Axios拦截器。

axios.js
这里存在一个逻辑问题，当用户第一次登陆才需要校验，
登陆成功之后，服务端返回一个Token
if(result.length>0){
      res.write(JSON.stringify({
        ok:1,uname:result[0]['uname'],
        remember:remember||false,
        token:jwt.generateToken(result[0])
      }));

用户登陆成功，服务端返回一个Token，为了保持登陆状态可以看缓存中有没有Token，
1.登陆成功，缓存中存一个token以及Vuex中存储用户信息
2.页面关闭怎么办，发起请求时先去缓存中找Token，然后带在请求头中，如果找不到Token，发起请求时，服务端校验。
校验过程如下：用Node中间件，在还没进入到路由之前做了一个拦截。
3.如果校验失败，一定要从缓存中移除Token，知道下一次登录成功再存进去
也就是app.use('/user',user)之前
app.use((req, res, next)=>{ 
  if (req.url != '/user/islogin' && (req.url.startsWith("/user") || req.url.startsWith("/orders"))) {
    let token = req.headers.token;
    let result = jwt.verifyToken(token);
    // 如果考验通过就next，否则就返回登陆信息不正确
    console.log(result)
    if(result === undefined){
      res.send({status:403, msg:"未提供证书"})
    }else if (result.name == 'TokenExpiredError') {
      res.send({status: 403, msg: '登录超时，请重新登录'});
    } else if (result.name=="JsonWebTokenError"){
      res.send({status: 403, msg: '证书出错'})
    } else{
      req.user=result;
      next();
    }
  } else {
    next();
  }

const Axios=axios.create({
  baseURL:"http://localhost:8080",
  withCredentials:true
})
Axios.interceptors.request.use(
  config=>{
  // post请求不能直接发对象参数，这里用qs模块转一下
    if(config.method ==="post"){
      config.data=qs.stringify(config.data)
    }
    if(localStorage.getItem("token")){
      config.headers.token=localStorage.getItem("token");
    }
    if(sessionStorage.getItem("token")){
      config.headers.token=sessionStorage.getItem("token");
    }
    return config;
  },
  error=>{
    console.log(error);
    Promise.reject(error);
  }
);
Axios.interceptors.response.use(
  res=>{
    if(res.data.status==403){
      localStorage.removeItem("token");
      sessionStorage.removeItem("token");
      console.log(403)
    }else if(res.data.ok==-1){
      alert(res.data.msg+" 请先登录 !");
      console.log(-1)
    }else if(res.data.token){
      console.log(res.data.token)
      if(res.remember==="true"){
        localStorage.setItem("token",res.data.token);
      }else{
        sessionStorage.setItem("token",res.data.token);
      }
    }
    return res;
  },
  error=>{
    
  }
)
export default {
  install: function(Vue, Option){
    Vue.prototype.$axios=Axios;
  }
}

效果图如下：
1.登录

登录成功后返回一个Token

2.访问购物车
在右侧看到请求头中带了一个Token，这里验证是通过了的。（代码都是从自己项目里面copy的，很久之前自己练手写的一个demo）