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

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: 前端:vue3+ts,后端:koa2+jwt,实现登陆功能(后端部分上篇)

前置,搭建项目并集成log4j实现日志系统



详细的介绍了koa2的环境搭建以及log4j的日志系统

# koa2搭配log4js实现日志监控


第一步,安装插件



1. 安装koa-jwt插件


npm install koa-jwt
复制代码


用法示例:


网络异常,图片无法展示
|

我们仅需要用到这个用法就可以了, key是前端的headers.authentication的token前置 secret是解密需要的密钥,login的时候,获取的token的时候,跟解密的时候,这个secret是需要一致的,不然无法解密成功


2. 安装jsonwebtoken插件


npm install jsonwebtoken
复制代码


网络异常,图片无法展示
|


var jwt = require('jsonwebtoken');
var token = jwt.sign({ foo: 'bar' }, 'xiaohe', { expiresIn: '2d' })
复制代码


foo: 'bar'  是需要加密的键值对

'xiaohe'是密钥

expiresIn 是token的有效时间,这里设置的是两天


3. 安装mongoose数据库


npm install mongoose
复制代码


实现



1. 先连接数据库

创建一个config文件夹,里面创建db.jsindex.js

db.js用于连接数据库,并打印对应的连接成功或失败


/**
 * 数据库连接
 * @auther 何小生
 */
const mongoose = require('mongoose')  // 引入mongoose
const config = require('./index')     // 引入config配置信息
const log4js = require('../utils/log4') // 引入log4j的日志系统
// mongoose连接数据库
mongoose.connect(config.URL, {
    useNewUrlParser: true,
    useUnifiedTopology: true
})
const db = mongoose.connection
// 打印数据库连接成功
db.on('error', () => {
    log4js.error('*** 数据库连接失败 ***')
})
// 打印数据库连接失败
db.on('open', () => {
    log4js.info('*** 数据库连接成功 ***')
})
复制代码


config.js 用于配置数据库信息的基础文件


/**
 *  配置文件
 */
module.exports = {
    URL: 'mongodb://127.0.0.1:27017/xiaohe'
}
复制代码


网络异常,图片无法展示
|


本地安装robo3T,用于做数据库可视化工具,数据库用的是mongooseDB

网络异常,图片无法展示
|


连接数据库,并创建对应的xiaohe数据库


网络异常,图片无法展示
|


在demo里面创建xiaohe数据库


网络异常,图片无法展示
|


在xiaohe数据库的collections里面,创建user表


网络异常,图片无法展示
|


点击insert document,往user表里填充数据


网络异常,图片无法展示
|


{
    "_id" : ObjectId("6118cc7ee27588cca19a8b70"),
    "state" : 1,
    "role" : "0",
    "roleList" : [ 
        "60180b07b1eaed6c45fbebdb", 
        "60150cb764de99631b2c3cd3", 
        "60180b59b1eaed6c45fbebdc"
    ],
    "deptId" : [ 
        "60167059c9027b7d2c520a61", 
        "60167345c6a4417f2d27506f"
    ],
    "userId" : 1000002,
    "username" : "admin",
    "password" : "admin",
    "userEmail" : "admin@imooc.com",
    "createTime" : "2021-01-17T13:32:06.381Z",
    "lastLoginTime" : "2021-01-17T13:32:06.381Z",
    "__v" : 0,
    "job" : "前端架构师",
    "mobile" : "17611020000"
}
复制代码


网络异常,图片无法展示
|


至此,连接数据库和一些准备工作已经基本完成,可以准备做下一步的操作了

相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
相关文章
|
1月前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
1月前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
17天前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
19天前
|
JavaScript 前端开发 搜索推荐
Vue的数据驱动视图与其他前端框架的数据驱动方式有何不同?
总的来说,Vue 的数据驱动视图在诸多方面展现出独特的优势,其与其他前端框架的数据驱动方式的不同之处主要体现在绑定方式、性能表现、触发机制、组件化结合、灵活性、语法表达以及与后端数据交互等方面。这些差异使得 Vue 在前端开发领域具有独特的地位和价值。
|
2月前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
2月前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
132 4
|
1月前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】 React与Vue:前端框架的巅峰对决与选择策略
|
2月前
|
前端开发 JavaScript API
2025年前端框架是该选vue还是react?有了大模型-例如通义灵码辅助编码,就不用纠结了!vue用的多选react,react用的多选vue
本文比较了Vue和React两大前端框架,从状态管理、数据流、依赖注入、组件管理等方面进行了详细对比。当前版本和下载量数据显示React更为流行,但Vue在国内用户量增长迅速。Vue 3通过组合式API提供了更灵活的状态管理和组件逻辑复用,适合中小型项目;React则更适合大型项目和复杂交互逻辑。文章还给出了选型建议,强调了多框架学习的重要性,认为技术问题已不再是选型的关键,熟悉各框架的最佳实践更为重要。
|
2月前
|
JSON 前端开发 JavaScript
Vue微前端新探:iframe优雅升级,扬长避短,重获新生
Vue微前端新探:iframe优雅升级,扬长避短,重获新生
125 0
|
2月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
173 0