前端: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月前
Vue3中getCurrentInstance如何与ts结合使用
【8月更文挑战第16天】Vue3中getCurrentInstance如何与ts结合使用
100 2
Vue3中getCurrentInstance如何与ts结合使用
|
26天前
|
前端开发
vue3+ts项目中使用mockjs
vue3+ts项目中使用mockjs
247 58
|
2月前
|
存储 JavaScript
任务清单小功能的实现(任务的增、删、改、查、存储)使用Vue实现
这篇文章介绍了使用Vue实现的任务清单小功能,包括任务的增加、删除、修改、查看以及数据存储。文章通过视频演示展示了实现效果,重点讲解了编辑功能的实现,并通过代码实例展示了编辑功能的核心代码,同时提供了完整的代码下载链接以及以往练习的概览。
任务清单小功能的实现(任务的增、删、改、查、存储)使用Vue实现
|
8天前
|
JavaScript 前端开发 UED
组件库实战 | 用vue3+ts实现全局Header和列表数据渲染ColumnList
该文章详细介绍了如何使用Vue3结合TypeScript来开发全局Header组件和列表数据渲染组件ColumnList,并提供了从设计到实现的完整步骤指导。
|
2月前
|
前端开发 JavaScript
基于Vue3实现鼠标按下某个元素进行拖动,实时改变左侧或右侧元素的宽度,以及点击收起或展开的功能
本文介绍了如何在Vue3项目中实现一个鼠标拖动调整元素宽度的功能,并展示了点击按钮收起或展开侧边栏的效果,提供了完整的实现代码和操作演示。
314 0
基于Vue3实现鼠标按下某个元素进行拖动,实时改变左侧或右侧元素的宽度,以及点击收起或展开的功能
|
2月前
|
JavaScript
基于Vue3+TS简单设计一个查看文章时点击展开和点击收起的小功能
该文章展示了如何使用Vue 3和TypeScript创建一个简单的展开和收起功能,用于文章查看时的交互体验。
111 0
基于Vue3+TS简单设计一个查看文章时点击展开和点击收起的小功能
|
2月前
|
Web App开发 JavaScript 前端开发
不光好上手,功能还特强的 Vue 3组件!且开源免费!
不光好上手,功能还特强的 Vue 3组件!且开源免费!
|
2月前
|
JavaScript 前端开发
【Vue 3】如何实现动态表单生成器的拖拽功能?
【Vue 3】如何实现动态表单生成器的拖拽功能?
|
2月前
|
JavaScript
哇哦~ 老板让我用 vue3 setup 实现动态表单的功能?这有什么难度吗?立马安排!
哇哦~ 老板让我用 vue3 setup 实现动态表单的功能?这有什么难度吗?立马安排!
|
2月前
|
开发者 Android开发 iOS开发
Xamarin开发者的神器!揭秘你绝不能错过的插件和工具,让你的开发效率飞跃式提升
【8月更文挑战第31天】Xamarin.Forms 是一个强大的框架,让开发者通过单一共享代码库构建跨平台移动应用,支持 iOS、Android 和 Windows。使用 C# 和 XAML,它简化了多平台开发流程,保持一致的用户体验。本指南通过创建一个简单的 “HelloXamarin” 应用介绍 Xamarin.Forms 的基本功能和工作原理。首先配置 Visual Studio 开发环境,然后创建并运行一个包含标题、按钮和消息标签的示例应用,展示如何定义界面布局及处理按钮点击事件。这帮助开发者快速入门 Xamarin.Forms,提高跨平台应用开发效率。
33 0
下一篇
无影云桌面