JWT鉴权机制详解-优快云博客

本文链接：https://blog.youkuaiyun.com/CS_DGD/article/details/105517952

什么是鉴权——jwt：json web token是为了在⽹络应⽤环境间传递声明⽽执⾏的⼀种基于JSON的开放标准

作用：

初次请求的时候服务器端和数据库会判断一下用户名和密码是否正确，如果在我的数据库里注册过，就会签发一个token给你，下次访问的时候需要在头部信息带上token，然后验证token验证通过就换会数据，否则返回401。
也就是说一些数据不是轻易就能让用户去拿到的，我们需要一些安全等级验证一下，验证通过给数据，没通过就不给数据

这就是鉴权的作用，相对而言安全性会更高一点，但是在网络安全上来说，安全性永远都是相对安全的，没有绝对安全，比如get与post相比，post就是安全的，但是单看post的话，他本身也是不安全的，只是想比较的话安全一些

同时！ token还有两个作用

增加安全性，鉴定权限
可以传一些简单的数据，也可以把它作为前后端的一个信息交互的工具

流程：

登录 --> 成功 --> 根据密匙生成token（2处明文和一处密文）;
token --> 存储(存完可能不是立马就用)；获取到token --> 请求头部携带token --> 发送到服务端;
服务端 --> 验证通过 / 验证不通过 --> 返还数据 / 返还401;

流程图示：
在这里插入图片描述
准备一个前端页面与后端服务器

前端

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="css/login.css" />
  <title>Document</title>
</head>

<body>
  <div class="loginContainer">
    <h1>登录</h1>
    <form action="/checkUser" method="post" onsubmit="return false;">姓名：
      <input class="inputStyle" id="username" type="text" name="username" /><br />密码：
      <input class="inputStyle" id="pwd" type="password" name="pwd" /><br />
      <input class="loginStyle" id="sub" type="submit" value="登录" />
      <button class="btn">点击我请求需要认证的接口</button>
    </form>
  </div>
</body>
<script>
  document.querySelector(".loginStyle").onclick = function () {
    let username = document.querySelector("#username").value;
    let pwd = document.querySelector("#pwd").value;
    let xhr = new XMLHttpRequest();
        xhr.open("post","/checkUser",true);
        xhr.onload = function(){
            console.log(xhr.responseText);
        };
        let data = `username=${username}&pwd=${pwd}`;
        xhr.send(data);
  }

</script>

</html>

后端

const Koa = require("koa");
const Router = require("koa-router");
const koaBody = require("koa-body");
const sta = require("koa-static");

let app = new Koa();
let router = new Router();

app.use(koaBody());
app.use(sta(__dirname+"/static"));

router.get("/login",ctx=>{
    ctx.body = "hello world"
});
router.post("/checkUser",ctx=>{
    console.log(ctx.request.body);
    ctx.body = "有请求";
});

app.use(router.routes());
app.listen(8080);

浏览器反馈
在这里插入图片描述
终端反馈

从反馈我们可以看到，数据是可以拿到的，但是类型是字符串，所以我们去设置一下头部信息

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

终端反馈
在这里插入图片描述
可以看出，设置完头部信息后，我们获得到的类型变成了对象

现在后端接收到数据后，我们去做一个登录验证，验证通过就签发token
签发秘钥时有一个很好的依赖，比较推荐，也可以自己写，但是需要一定的代码量的

const jwt = require("jsonwebtoken");    //签发

router.post("/checkUser",ctx=>{
    console.log(ctx.request.body);

    let {username,pwd} = ctx.request.body
    let info;
    if(username === "张三" && pwd === "123"){
        // 验证成功,签发token
        const token = jwt.sign({
            _id : 1
        },"mytoken",{expiresIn:"2h"});
        /*
			需要三个参数 
			1. 传递信息 是一个对象，描述用户信息 
			2. 秘钥 
			3. token值得时效性
				(token的一个缺点，一旦设置后就不可以改变，所以时效性越短，风险性越低)
		*/

        info = {
            message : "正确",
            status : 1,
            token
        }
    }else{
        info = {
            message : "错误",
            status : 0
        }
    }
    
    ctx.body = info;
});

浏览器反馈
在这里插入图片描述
我们可以看出token的返回值是一长串我们看不懂的代码，这里给大家推荐一个网站可以查看token的返回值
网站：jwt.io

从上图我们可以看出，秘钥分为三部分

头部信息
字段内的内容
密码

所以我们说它是两端明文一段密文组成的

然后这个数据类型其实很难受，因为这里有三个东西，第一个是用户提示，第二个状态码，第三个才是我们需要的token，然后我们可以这样简单的做一个处理

		xhr.onload = function(){
            console.log(xhr.responseText);
            let token = JSON.parse(xhr.responseText).token;
            localStorage.setItem("token",token);
        };

浏览器反馈
在这里插入图片描述
回顾一下我们上边都做了些什么 ----> 去服务端验证一下，然后从服务端回来给我们签发了token并且我们把它存在了本地存储里。

按照正常的业务逻辑，这时，拿到客户端存储的token并且进行一个跳转就可以了

	// 需要认证的数据：头部携带token，请求接口
    document.querySelector(".btn").onclick = function(){
        let xhr = new XMLHttpRequest();
        xhr.open("post","/apiCheck",true);

        let token = localStorage.getItem("token");
        if(token){
            xhr.setRequestHeader("Authorization","Bearer " + token) // Bearer后边一定要加空格！！！
        }
        xhr.onload = function(){
            console.log(xhr.responseText);
        };
        xhr.send();
    }

前端跳转实现后我们需要到后端去验证一下，验证我们和签发一样同样也可以去通过原生去写，但是不推荐，因为需要一定代码量，所以我们需要一个依赖

const koajwt = require("koa-jwt");      //验证

// 需要token认证的接口
router.post("/apiCheck", koajwt({ secret: "mytoken" }), ctx => {
    // 签发的密码和验证的密码不一致，则验证不通过
    // 验证token 两个明文一个密文，明文没什么好查的，直接验证密文，因为密文里边就是密码，明文里边有时可能还会有数据
	ctx.body = {
        name: "我是神秘接口来的"
    }
})

注意点：

jwt 和 koajtw 都不需要是有app.use()来加载，直接使用！！！
const jwt = require("jsonwebtoken");    //签发
const koajwt = require("koa-jwt");      //验证

浏览器反馈
在这里插入图片描述
现在我们就完成了鉴权拿到了数据。
注意时效性过期后需要重新登陆一下！！！

写给大忙人看的鉴权