react+koa+vite前后端模拟jwt鉴权过程

这篇具有很好参考价值的文章主要介绍了react+koa+vite前后端模拟jwt鉴权过程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

路由组件(生成token)

const Router = require('@koa/router')
const jwt = require('jsonwebtoken');
const router = new Router()

const mockDbUserInfo = [
  {
    nickname: 'xxxliu',
    username: 'Tom',
    password: 123456,
    icon: 'url1'
  },
  {
    nickname: 'xxx',
    username: 'John',
    password: 123456,
    icon: 'url2'
  },
]

const secretKey = 'xxxliu key';

router.post('/api/home', async ctx => {
  ctx.response.body = {
    msg: '主页',
    code: 'success'
  }
})


router.post('/api/login', async ctx => {
  try {
    const { username, password } = ctx.request.body;
    //mock查db操作
    const { nickname, password: pwd, icon } = mockDbUserInfo.find(item => item.username === username) || {};

    if (!nickname) {
      ctx.response.body = {
        msg: "不存在该用户",
        code: "failed",
      };
      return;
    }

    if (pwd !== password) {
      ctx.response.body = {
        msg: "密码输入错误",
        code: "error",
      };
      return;
    }

    // 构建 JWT 头部
    const header = {
      alg: 'HS256', // 签名算法,例如使用 HMAC SHA-256
      typ: 'JWT', // Token 的类型
    };
    const payload = {
      username
    };
    const options = {
      expiresIn: '1h', // 设置 JWT 的过期时间
      header, // 将 header 选项包含在 options 中
    };

    //生成token
    const token = jwt.sign(payload, secretKey, options);

    ctx.response.body = {
      nickname,
      icon,
      code: "success",
      msg: "登录成功",
    };

    ctx.cookies.set(
      'myToken',
      token,
      {                
        maxAge: 1 * 60 * 60 * 1000,       
        httpOnly: false
      }
    )

  } catch (error) {
    ctx.response.body = error;
  }
})

module.exports = router;

token解析

const jwt = require('jsonwebtoken');

const secretKey = 'xxxliu key';
const verifyToken = async (ctx, next) => {
  try {
    const { url } = ctx.request;

    //走登录页不鉴权
    const requestUrl = url.split("?")[0];
    const noVerifyList = ["/api/login"];
    const noVerify = noVerifyList.includes(requestUrl);

    if (noVerify) {
      await next();
    } else {
      //拿到请求头的参数
      const authorization = ctx.request.header["authorization"];
      const username = ctx.request.body["username"];

      if (authorization.startsWith('Bearer ')) {
        const token = authorization.slice(7);
        const { exp, username: userName } = jwt.verify(token, secretKey) || {};

        if (userName !== username) {
          ctx.response.body = {
            code: "error",
            msg: "无效的token, 请重新登录",
          };
        }
        else if (exp * 1000 > Date.now()) {
          ctx.response.body = {
            code: "error",
            msg: "登录信息已过期, 请重新登录",
          };
        } else {
          await next();
        }
      } else {
        ctx.response.body = {
          code: "error",
          msg: "无效的token, 请重新登录",
        };
      }
    }
  } catch (err) {
    if (err.name == "TokenExpiredError") {
      ctx.body = {
        code: "error",
        msg: "token已过期, 请重新登录",
      };
    } else if (err.name == "JsonWebTokenError") {
      ctx.body = {
        code: "error",
        msg: "无效的token, 请重新登录",
      };
    }
  }

};

module.exports = verifyToken;

注册中间件

const Koa = require('koa')
const path = require('path')
const sendfile = require('koa-sendfile')
const static = require('koa-static')
const bodyParser = require("koa-bodyparser")
const router = require('./server/api-router.js')
const assets = require('./server/assets-router')
const verifyToken = require('./server/verifyToken.js');
const app = new Koa()

// static
app.use(static(path.resolve(__dirname, 'public')))

//body
app.use(bodyParser());

//midware auth
app.use(verifyToken);

// api
app.use(router.routes()).use(router.allowedMethods())

// assets
app.use(assets.routes()).use(assets.allowedMethods())

// 404
app.use(async (ctx, next) => {
  await next()

  if (ctx.status === 404) {
    await sendfile(ctx, path.resolve(__dirname, 'public/index.html'))
  }
})

app.listen(3000, () => {
  console.log(`> http://127.0.0.1:3000`)
})

前端请求(登录+打开主页)文章来源地址https://www.toymoban.com/news/detail-684747.html

import { useState, useEffect } from 'react'
import getTokenFromCookie from './tools'
function App() {
  const [response, setResponse] = useState({})

  const token = getTokenFromCookie();

  useEffect(() => {
    fetch('/api/login', {
      method: 'post',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token}`,
      },
      body: JSON.stringify({
        username: 'Tom',
        password: 123456
      })
    })
      .then(res => res.json())
      .then(res => {
        setResponse(res);
      })

    // fetch('/api/home', {
    //   method: 'post',
    //   headers: {
    //     'Content-Type': 'application/json',
    //     'Authorization': `Bearer ${token}`,
    //   },
    //   body: JSON.stringify({
    //     username: 'Tom',
    //     password: 123456
    //   })
    // })
    //   .then(res => res.json())
    //   .then(res => {
    //     setResponse(res);
    //   })

  }, [])

  const { nickname, icon, msg } = response || {}

  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      {
        nickname ? <div>
          <h1>icon: {icon}</h1>
          <h1>nickname: {nickname}</h1>
          <h1>msg: {msg}</h1>
        </div>
          : <h1>msg: {msg}</h1>
      }
    </div>
  )
}

export default App

到了这里,关于react+koa+vite前后端模拟jwt鉴权过程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用vite创建Vue/React前端项目,配置@别名和Sass样式,又快又方便

    Vite官方网站:Vite | 下一代的前端工具链  Vite 并不是基于 Webpack 的,它有自己的开发服务器,利用浏览器中的原生 ES 模块。这种架构使得 Vite 比 Webpack 的开发服务器快了好几个数量级。Vite 采用 Rollup 进行构建,速度也更快。  兼容性注意 Vite 需要 Node.js 版本 14.18+,16+。然

    2024年02月14日
    浏览(51)
  • 图片接口JWT鉴权实现

    之前做了个返回图片链接的接口,然后没做授权,然后今天键盘到了,也是用JWT来做接口的权限控制。 然后JTW网上已经有很多文章来说怎么用了,这里就不做多的解释了,如果不懂的可以参考下列链接的 文章。 图片接口文章:还在愁个人博客没有图片放? JTW参考: 画星星

    2024年02月07日
    浏览(42)
  • WebApi中添加Jwt鉴权

    JSON Web Token(JWT)是一个非常轻巧的规范。这个规范允许我们使用 JWT 在用户和服务器之间传递安全可靠的信息。一个 JWT 实际上就是一个字符串,它由三部分组成,头部、载荷与签名。前两部分需要经过 Base64 编码,后一部分通过前两部分 Base64 编码后再加密而成。针对前后端

    2024年02月08日
    浏览(38)
  • AspNetCore 成长杂记(一):JWT授权鉴权之生成JWT(其一)

    最近不知怎么的,自从学了WebAPI(为什么是这个,而不是MVC,还不是因为MVC的Razor语法比较难学,生态不如现有的Vue等框架,webapi很好的结合了前端生态)以后,使用别人的组件一帆风顺,但是不知其意,突然很想自己实现一个基于的JWT认证服务,来好好了解一下这个内容。 自

    2023年04月19日
    浏览(35)
  • AspNetCore 成长杂记(一):JWT授权鉴权之生成JWT(其二)

    前面说了用第三方类库生成JWT的故事,给我带来了很大的方便,并且我也承诺要写一篇用常规方法生成JWT的文章( 一般都是用微软官方的类库 ),因此才有了这篇文章。 另外,在前面的文章中,我要纠正一下一些错误JWT的整个结构决定了JWT只能作为临时的授权认证解决方案,

    2023年04月26日
    浏览(30)
  • .Net Core Jwt鉴权授权

    目录 简介 基于.Net Core 验证方式 Jwt获取Token 引入三方包 生成Token UserInfo JwtConfig WebApi测试(获取Token) Program.cs appsetting.json Controller .Net Core 验证(webApi) Progarm.cs Contorller .Net Core 授权 简介 Program.cs JwtAuthorization.cs 注意 Autofac 注册授权服务 Controller 注意 jwt触发委托 Jwt分为三段 通过远

    2024年02月13日
    浏览(32)
  • Springboot实现简单JWT登录鉴权

    登录需要鉴权是为了保护系统的安全性和用户的隐私。在一个 Web 应用中,用户需要提供一定的身份信息(例如用户名和密码)进行登录,登录后系统会为用户生成一个身份令牌(例如 JWT Token)来标识用户的身份。 鉴权的主要目的是确保只有经过身份验证的用户才能访问系统

    2024年02月13日
    浏览(29)
  • 在Nodejs中使用JWT进行鉴权

    JSON Web Token(JWT)是一种用于在web上传递信息的标准,它以JSON格式表示信息,通常用于身份验证和授权。 JWT由三个部分组成:Header(头部)、Payload(负载)和Signature(签名)。它们用点号分隔开,形成了一个JWT令牌。 Header Header(头部)是JWT结构的第一部分,它是一个包含关

    2024年02月10日
    浏览(39)
  • .NET WebAPI 运用JWT鉴权授权

    1:引用需要的程序集 :System.IdentityModel.Token.JWT 2:创建一个新的控制器,用于授权功能 3:服务中进行注册 4:启动鉴权授权 5:在需要的鉴权授权的API  中调用 6:发送请求接口时候  请求头 {Authorzation:\\\"bearer\\\"+空格 + token}

    2024年02月14日
    浏览(33)
  • JWT加密解密登录鉴权逻辑是什么?

    JWT(JSON Web Token)是一种用于进行认证和授权的开放标准,它可以安全地传输信息,通常用于实现身份验证和鉴权逻辑。 以下是使用JWT进行登录鉴权的一般逻辑: 1:用户登录: 用户提供用户名和密码进行登录。 服务器验证用户提供的凭据是否有效。 2:生成JWT: 服务器验证

    2024年02月06日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包