前端: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


相关文章
|
2月前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
139 2
|
2月前
|
JSON 前端开发 搜索推荐
惊!这些前端技术竟然能让你的网站实现个性化推荐功能!
【10月更文挑战第30天】随着互联网技术的发展,个性化推荐已成为提升用户体验的重要手段。前端技术如JavaScript通过捕获用户行为数据、实时更新推荐结果等方式,在实现个性化推荐中扮演关键角色。本文将深入解析这些技术,并通过示例代码展示其实际应用。
93 4
|
2月前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
2月前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
3月前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
2月前
|
JavaScript 前端开发 搜索推荐
Vue的数据驱动视图与其他前端框架的数据驱动方式有何不同?
总的来说,Vue 的数据驱动视图在诸多方面展现出独特的优势,其与其他前端框架的数据驱动方式的不同之处主要体现在绑定方式、性能表现、触发机制、组件化结合、灵活性、语法表达以及与后端数据交互等方面。这些差异使得 Vue 在前端开发领域具有独特的地位和价值。
|
3月前
|
监控 JavaScript 前端开发
前端的混合之路Meteor篇(六):发布订阅示例代码及如何将Meteor的响应数据映射到vue3的reactive系统
本文介绍了 Meteor 3.0 中的发布-订阅模型,详细讲解了如何在服务器端通过 `Meteor.publish` 发布数据,包括简单发布和自定义发布。客户端则通过 `Meteor.subscribe` 订阅数据,并使用 MiniMongo 实现实时数据同步。此外,还展示了如何在 Vue 3 中将 MiniMongo 的 `cursor` 转化为响应式数组,实现数据的自动更新。
|
3月前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
188 4
|
2月前
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆,以及最终构建项目进行混淆。通过这些步骤,可以有效提升前端代码的安全性,防止被他人轻易分析和盗用。
380 0
|
2月前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】 React与Vue:前端框架的巅峰对决与选择策略