前端:vue3+ts,后端:koa2+jwt,实现登陆功能(后端部分下篇)

简介: 前端:vue3+ts,后端:koa2+jwt,实现登陆功能(后端部分下篇)

1. 在routes里面,创建一个user.js文件,用作登陆的后端文件



/**
 * 用户管理模块
 */
const router = require('koa-router')()  // koa路由文件
const User = require('../models/userSchema')  // schema文件 定义user用户的字段的
const util = require('../utils/util')  // 引入请求成功与否的封装
const jwt = require('jsonwebtoken')  // 引入jsonwebtoken做token的加密
// 二级路由前缀定义
router.prefix('/users')
// 用户的登录
router.post('/login', async (ctx) => {
  try {
      // get请求是ctx.request.query
      // post请求是ctx.request.body
      const { username, password } = ctx.request.body
      /**
       * 返回数据库指定字段, 有三种方式
       * 1. 'userId username userEmail state role deptId roleList'    // 选择只返回的字段
       * 2. { userId: 1, _id: 0 }                                     // 选择只返回的字段, 1是展示, 0是不展示
       * 3. selec('userId')                                           // 查找userId
       */
      const res = await User.findOne({
          username,
          password
        }, 'userId userame userEmail state role deptId roleList')
      const data = res._doc##
      // 利用jsonwebtoken生成基于密钥xiaohe的token
      const token = jwt.sign({
        data,
      }, 'xiaohe', { expiresIn: '2d' })
      // 当查找到数据的时候,返回token和成功
      if(res) {
        data.token = token
        ctx.body = util.success(data)
      } else {
        ctx.body = util.fail('账号或密码不正确')
      }
  } catch (error) {
    //   console.log(error)
      ctx.body = util.fail(error.msg)
  }
})
复制代码


2. 挂载一下到app.js里面



const Koa = require('koa')
const app = new Koa()
const views = require('koa-views')
const json = require('koa-json')
const onerror = require('koa-onerror')
const bodyparser = require('koa-bodyparser')
const logger = require('koa-logger')
const koajwt = require('koa-jwt')    // 引入koa-jwt,用于解密
const users = require('./routes/users') // 引入users文件
const log4js = require('./utils/log4j') // 引入日志系统
const router = require('koa-router')() // 引入路由跳转
const util = require('./utils/util')  // 引入状态吗
// error handler
onerror(app)
// 使用db连接数据库
require('./config/db')
// middlewares
app.use(bodyparser({
  enableTypes:['json', 'form', 'text']
}))
app.use(json())
app.use(logger())
app.use(require('koa-static')(__dirname + '/public'))
app.use(views(__dirname + '/views', {
  extension: 'pug'
}))
// logger   中间件
app.use(async (ctx, next) => {
  log4js.info(`get: ${ JSON.stringify(ctx.request.query) }`)
  log4js.info(`params: ${ JSON.stringify(ctx.request.body) }`)
  // 当状态码是401的时候,改成200,并展示token认证失败
  await next().catch(err => {
    if(err.status == '401') {
      ctx.status = 200
      ctx.body = util.fail('Token认证失败', util.CODE.AUTH_ERROR)
    } else throw err
  })
})
// koa的jwt校验, secret: 密钥   unless: 过滤掉不需要校验的api
app.use(koajwt({ secret: 'xiaohe' }).unless({
  path: [/^\/api\/users\/login/]
}))  // 密钥校验,jwt校验
router.prefix('/api')  // api前缀
// 挂载users上路由
router.use(users.routes(), users.allowedMethods())
// routes
app.use(router.routes(), router.allowedMethods())
// error-handling
app.on('error', (err, ctx) => {
  // console.error('server error', err, ctx)
  log4js.error(`${ err.stack }`)
});
module.exports = app


相关文章
|
7天前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
1天前
|
机器学习/深度学习 数据采集 JavaScript
ADR智能监测系统源码,系统采用Java开发,基于SpringBoot框架,前端使用Vue,可自动预警药品不良反应
ADR药品不良反应监测系统是一款智能化工具,用于监测和分析药品不良反应。该系统通过收集和分析病历、处方及实验室数据,快速识别潜在不良反应,提升用药安全性。系统采用Java开发,基于SpringBoot框架,前端使用Vue,具备数据采集、清洗、分析等功能模块,并能生成监测报告辅助医务人员决策。通过集成多种数据源并运用机器学习算法,系统可自动预警药品不良反应,有效减少药害事故,保障公众健康。
ADR智能监测系统源码,系统采用Java开发,基于SpringBoot框架,前端使用Vue,可自动预警药品不良反应
|
11天前
|
JavaScript 前端开发
【前端web入门第一天】03 综合案例 个人简介与vue简介
该网页采用“从上到下,先整体再局部”的制作思路,逐步分析并编写代码实现个人简介页面。内容涵盖尤雨溪的背景、学习经历及主要成就,同时介绍其开发的Vue.js框架特点。代码结构清晰,注重细节处理,如使用快捷键提高效率,预留超链接位置等,确保最终效果符合预期。
|
8天前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
29 3
|
7天前
|
JavaScript 前端开发 API
如何在前端开发中有效管理状态:React vs. Vue
在现代前端开发中,状态管理是一个关键因素,它直接影响到应用的性能和可维护性。React 和 Vue 是当前最流行的前端框架,它们在状态管理方面各有优势和劣势。本文将深入探讨 React 和 Vue 在状态管理中的不同实现,分析它们的优缺点,并提供实际应用中的最佳实践,以帮助开发者选择最适合他们项目的解决方案。
|
20天前
|
前端开发 Java Spring
Spring与Angular/React/Vue:当后端大佬遇上前端三杰,会擦出怎样的火花?一场技术的盛宴,你准备好了吗?
【8月更文挑战第31天】Spring框架与Angular、React、Vue等前端框架的集成是现代Web应用开发的核心。通过RESTful API、WebSocket及GraphQL等方式,Spring能与前端框架高效互动,提供快速且功能丰富的应用。RESTful API简单有效,适用于基本数据交互;WebSocket支持实时通信,适合聊天应用和数据监控;GraphQL则提供更精确的数据查询能力。开发者可根据需求选择合适的集成方式,提升用户体验和应用功能。
52 0
|
20天前
|
前端开发 Java JSON
Struts 2携手AngularJS与React:探索企业级后端与现代前端框架的完美融合之道
【8月更文挑战第31天】随着Web应用复杂性的提升,前端技术日新月异。AngularJS和React作为主流前端框架,凭借强大的数据绑定和组件化能力,显著提升了开发动态及交互式Web应用的效率。同时,Struts 2 以其出色的性能和丰富的功能,成为众多Java开发者构建企业级应用的首选后端框架。本文探讨了如何将 Struts 2 与 AngularJS 和 React 整合,以充分发挥前后端各自优势,构建更强大、灵活的 Web 应用。
34 0
|
20天前
|
前端开发 开发者 UED
数据校验的艺术:揭秘JSF如何将前端与后端验证合二为一,打造无缝用户体验
【8月更文挑战第31天】JavaServer Faces(JSF)是构建企业级Web应用的Java规范,提供了丰富的组件和API,便于快速搭建用户界面。JSF验证框架基于JavaBean验证API(JSR 303/JSR 380),利用注解如`@NotNull`、`@Size`等在模型类上定义验证规则,结合前端的`<h:inputText>`和`<h:message>`标签展示错误信息。
23 0
|
20天前
|
前端开发 大数据 数据库
🔥大数据洪流下的决战:JSF 表格组件如何做到毫秒级响应?揭秘背后的性能魔法!💪
【8月更文挑战第31天】在 Web 应用中,表格组件常用于展示和操作数据,但在大数据量下性能会成瓶颈。本文介绍在 JavaServer Faces(JSF)中优化表格组件的方法,包括数据处理、分页及懒加载等技术。通过后端分页或懒加载按需加载数据,减少不必要的数据加载和优化数据库查询,并利用缓存机制减少数据库访问次数,从而提高表格组件的响应速度和整体性能。掌握这些最佳实践对开发高性能 JSF 应用至关重要。
36 0
|
20天前
|
前端开发 开发者 Apache
揭秘Apache Wicket项目结构:如何打造Web应用的钢铁长城,告别混乱代码!
【8月更文挑战第31天】Apache Wicket凭借其组件化设计深受Java Web开发者青睐。本文详细解析了Wicket项目结构,帮助你构建可维护的大型Web应用。通过示例展示了如何使用Maven管理依赖,并组织页面、组件及业务逻辑,确保代码清晰易懂。Wicket提供的页面继承、组件重用等功能进一步增强了项目的可维护性和扩展性。掌握这些技巧,能够显著提升开发效率,构建更稳定的Web应用。
53 0