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

1,253 阅读2分钟

这是我参与8月更文挑战的第16天,活动详情查看:8月更文挑战

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

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

# koa2搭配log4js实现日志监控

第一步,安装插件

1. 安装koa-jwt插件

npm install koa-jwt

用法示例:

image.png

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

2. 安装jsonwebtoken插件

npm install jsonwebtoken

image.png

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'
}

image.png

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

image.png

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

image.png

在demo里面创建xiaohe数据库 image.png

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

image.png

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

image.png

{
    "_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"
}

image.png

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

最后

公众号:小何成长,佛系更文,都是自己曾经踩过的坑或者是学到的东西

有兴趣的小伙伴欢迎关注我哦,我是:何小玍。大家一起进步鸭

需要源码的,欢迎添加公众号,然后跟我要源码吧。