前后端交互 -- jwt 鉴权

最新推荐文章于 2024-07-13 16:51:47 发布

CSDN_GMC

最新推荐文章于 2024-07-13 16:51:47 发布

阅读量978

点赞数

分类专栏： ajax跨域文章标签： jwt javascript ajax nodejs 前端

本文链接：https://blog.csdn.net/CSDN_GMC/article/details/105520226

版权

本文详细介绍了JWT（Json Web Token）鉴权的过程，包括签发生成token、token的组成、存储与获取、请求时头部携带token以及服务端验证头部。讲解了jsonwebtoken和koa-jwt模块的使用，并提供了综合代码示例。

摘要由CSDN通过智能技术生成

jwt 鉴权

一. jwt 鉴权基本概念

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

四个核心点: 1.签发 2.token存取 3.头部携带 4.验证头部

登录 ---------> 成功 —> 根据密钥生成 token（两处明文和一处密文）像一个门票
token --------> 存储；获取到token —> 请求头部携带token —> 服务端
服务端 ------> 验证通过 —> 返回数据
------> 验证不通过 —> 返回401

二. 签发生成token

2.1. 使用 jsonwebtoken 模块

const jwt = require("jsonwebtoken"); 签发token，下载完可以直接使用

使用示例：

const token = jwt.sign({
     name: reslut[0].username,
     _id: reslut[0].id
}, 'my_token', { expiresIn: '2h' });

2.2. jwt.sign({ } , " " , { })中的三个参数

jwt.sign({ } , " " ,{ } ) 验证成功，签发token

参数1： { 需要传递的信息 }，对象中可以放些字段用来描述用户信息等等
参数2： " 密钥、密码 "
参数3： { token的时效性 }，时效性越短，风险几率越低，失效后又得重新登录，又发一个新token
token的一个缺点：一旦签发了，没有办法进行修改，所以需要设置时效性
token作用：1.可以鉴权 2.也可以进行简单的数据交流，进行前端后端之间的数据交互，可以替代一些其他的方式

三. token 的组成、存储与获取

3.1. token的组成

服务器端代码

router.post("/checkUser",ctx=>{
    
   console.log(ctx.request.body); //{ username: '张三', pwd: '123' }

   let {
    username,pwd} = ctx.request.body;

   let info;
   if(username === "张三" && pwd === "123"){
    
   
       const token = jwt.sign({
    
           _id : 1                 
       },"mytoken",{
    expiresIn : "2h"});

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

客户端对应代码

   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.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
     
     xhr.onload = function(){
    
       console.log(xhr.responseText);  //jwt.io可以解码看输出的token
      
       let token = JSON.parse(xhr.responseText).token;
       
       //客户端存上了，存储到了token
       localStorage.setItem("token",token)