react中v6路由守卫拦截，后端expressJWT中token验证实例（前后端代码）

v6路由：https://blog.csdn.net/kkkys_kkk/article/details/134851952?spm=1001.2014.3001.5501

前端

登录页面

在这里为了方便直接引入了axios模块，并且使用 Axios 库设置默认的请求基础 URL,后端接口3000

//引入的模块
import React, { useState } from 'react'
import axios from 'axios'
import { useNavigate } from 'react-router-dom'

axios.defaults.baseURL='http://localhost:3000'

获取表单数据，请求后端，根据后端返回的状态码来判断是否登录成功

成功则储存token信息，在这里用的是sessionStorage的方法

   const [username,setusername]=useState('')//用户名
    const [pwd,setpwd]=useState('')//密码
    const navigate=useNavigate()//路由跳转函数

    const login=async ()=>{
        let {data}=await axios.get('/login',{params:{
            username,
            pwd
        }})

        if(data.code == 200){
            sessionStorage.setItem("token",data.token)//储存后端返回的token
            navigate('/home')//验证成功，跳转到主页面
        }

    }

form表单信息，默认是GET方法，需要注意的是，在from表单中，button默认的是submit，通常会触发以下的默认行为：

1. 浏览器会检查表单中的输入字段，然后将这些字段的数据收集起来，构成一个键值对的集合。
2. 浏览器会将收集到的数据作为请求的正文，与表单的 `action` 属性指定的URL结合，以及采用表单的 `method` 属性指定的HTTP 方法，创建一个 HTTP 请求。
3. 浏览器会发送这个 HTTP 请求到指定的URL，然后等待服务器的响应。

当使用`submit`方式来触发表单的提交时，会触发上述的默认行为。如果你希望在表单提交时执行自定义的操作，你可以通过在 `

` 元素中定义 `onSubmit` 事件来捕获表单的提交事件，并阻止默认行为。例如：

function handleSubmit(event) {
  event.preventDefault(); // 阻止默认的表单提交行为
  // 执行自定义的操作，如数据验证、数据处理、或者发送 AJAX 请求
}
...

  {/* 表单输入元素 */}
  Submit

在上述例子中，`event.preventDefault()` 会阻止表单的默认提交行为，然后你可以编写自定义的处理逻辑（比如数据验证、数据处理、或者发送 AJAX 请求）来替代默认的行为。

或者，使用input按钮，更改属性的方式

  

        //用户名
        {
          setusername(e.target.value)}}
        />
        

        //密码
        {
         setpwd(e.target.value)}}
        />
        

        //提交按钮
        
       

主页面（守卫页面）

在页面进行初始化访问后台数据时，获取我们在sessionStorage中储存的token信息，封装在请求头中，在后端进行token的有效性验证

Authorization 头通常用于传递身份验证信息

const getdata=async ()=>{
    const token = sessionStorage.getItem('token');
//封装请求头对象
    const headers = {
      'Authorization': token
       };

    let {data}=await axios.get('/list',{
            params：{},
           headers: headers  //封装请求头
        })
    }

路由表

在我之前的文章中有代码解释，在这不过多赘述

拦截函数

const Isloginn=(props)=>{ 
    const Comp  = props.children.type
    if(sessionStorage.getItem("token")){
        return 
    }else{
      return 
    }
 
}

拦截路由

 {
        path:'/home',
        element:
    },

后端

我们需要用到 jsonwebtoken 和 express-jwt版本六的 模块，首先下载

npm i jsonwebtoken express-jwt@6

app.js文件

主要我们是引入expressJWT 中间件，进行拦截配置

//引入验证中间件
var expressJWT = require('express-jwt')
//跨域
var cors = require('cors')


app.use(cors())//挂载跨域方法
//token验证
app.use(
  expressJWT({//expressJWT 函数用于创建一个 JWT 的身份验证中间件。
  credentialsRequired: true,//一个布尔值，指定是否要求验证请求必须包含有效的 JWT。默认为 true，表示必须携带有效的 JWT 才能通过验证。
secret:"lll", //指定了用于签名和验证 JWT 的密钥
algorithms:["HS256"],//指定了用于验证 JWT 的算法，这里是 HMAC-SHA256 算法。
  }).unless({//指定了哪些路径不需要进行 JWT 身份验证，白名单
    path:['/login']
  }))

还有其他的参数信息

1. requestProperty: 一个字符串，用于指定将解析后的 JWT 存储在请求对象的哪个属性上，例如user。默认情况下，解析后的 JWT 被存储在 req.user 中。

2. getToken: 一个函数，用于自定义从请求中获取 JWT 的逻辑。默认情况下，中间件将检查请求头（header）的 Authorization 部分，并尝试从中提取 JWT。

3. isRevoked: 一个可选函数，用于指定撤销（吊销）JWT 的逻辑。如果 JWT 被撤销，将无法通过验证。

4. revokedError: 一个字符串或者自定义错误类型，用于指定撤销 JWT 时要返回的错误信息。

路由API

接受前台发过来的数据，查询后台数据表中有没有该用户信息，进行结果判断

验证通过，配置token信息，返回token

以Bearer格式信息封装在HTTP 请求头中，通常使用 “Bearer” 方案来传递 JWT，

使用了 jwt 库的 sign 函数来创建一个新的 JWT

第一个参数{ username: finder[0].username }表示在 JWT 载荷（payload）中要包含的数据，这里是用户名信息。

第二个参数"lll"是用来进行签名的密钥，和app.js配置的内容一致

第三个参数{ expiresIn: "1h" }表示 JWT 的过期时间为1小时。

var jwt = require('jsonwebtoken')

router.get('/login',async (req,res)=>{
  let {username,pwd} = req.query
  let finder = await userModel.find({
    username
  })
  console.log(finder);
  if(finder.length !== 0){
    if(pwd == finder[0].pwd){
      let token = 
       "Bearer" +" " + jwt.sign({ username: finder[0].username }, "lll", { expiresIn: "1h" })

       res.send({
        code:200,
        msg:'okk',
        token
       })
    }else{
      res.send({
        code:201,
        msg:'pwd wrong',
       })
    }
  }else{
    res.send({
      code:202,
      msg:'name wrong',
     })
  }
})