基于 Vue + Koa2 + MongoDB + Redis 实现一个完整的登录注册
项目地址：https://github.com/caochangkui/vue-element-responsive-demo/tree/login-register
通过 vue-cli3.0 + Element 构建项目前端，Node.js + Koa2 + MongoDB + Redis 实现数据库和接口设计，包括邮箱验证码、用户注册、用户登录、查看删除用户等功能。
1. 技术栈
-
前端
- 初始化项目：vue-cli3.0
- 组件库：Element-ui
- 路由控制/拦截：Vue-router
- 状态管理：Vuex
-
服务端
- 运行环境：Node.js
- 后台开发框架：Koa2
- 路由中间件：Koa-router
- 发送邮件: nodemailer
-
HTTP通讯
- 接口请求/拦截：Axios
- Token认证：jsonwebtoken
-
数据库
2. 项目依赖：
"dependencies": {
"axios": "^0.18.0",
"crypto-js": "^3.1.9-1",
"element-ui": "^2.4.5",
"js-cookie": "^2.2.0",
"jsonwebtoken": "^8.5.0",
"koa": "^2.7.0",
"koa-bodyparser": "^4.2.1",
"koa-generic-session": "^2.0.1",
"koa-json": "^2.0.2",
"koa-redis": "^3.1.3",
"koa-router": "^7.4.0",
"mongoose": "^5.4.19",
"nodemailer": "^5.1.1",
"nodemon": "^1.18.10",
"vue": "^2.5.21",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
}
3. 前端实现步骤
3.1 登录注册页面
通过 vue-cli3.0 + Element 构建项目前端页面
登录页（@/view/users/Login.vue）：
注册页（@/view/users/Register.vue）：
发送验证码前需要验证用户名和邮箱，用户名必填，邮箱格式需正确。
用户设置页（@/view/users/setting/Setting.vue）
用户登录后，可以进入用户设置页查看用户和删除用户
3.2 Vuex 状态管理
通过 vuex 实现保存或删除用户 token，保存用户名等功能。
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter。
根目录下新建store文件夹，创建modules/user.js:
const user = {
state: {
token: localStorage.getItem('token'),
username: localStorage.getItem('username')
},
mutations: {
BIND_LOGIN: (state, data) => {
localStorage.setItem('token', data)
state.token = data
},
BIND_LOGOUT: (state) => {
localStorage.removeItem('token')
state.token = null
},
SAVE_USER: (state, data) => {
localStorage.setItem('username', data)
state.username = data
}
}
}
export default user
创建文件 getters.js 对数据进行处理输出:
const getters = {
sidebar: state => state.app.sidebar,
device: state => state.app.device,
token: state => state.user.token,
username: state => state.user.username
}
export default getters
创建文件 index.js 管理所有状态:
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
user
},
getters
})
export default store
3.3 路由控制/拦截
路由配置（router.js）：
import Vue from 'vue'
import Router from 'vue-router'
const Login = () => import(/* webpackChunkName: "users" */ '@/views/users/Login.vue')
const Register = () => import(/* webpackChunkName: "users" */ '@/views/users/Register.vue')
const Setting = () => import(/* webpackChunkName: "tables" */ '@/views/setting/Setting.vue')
Vue.use(Router)
const router = new Router({
base: process.env.BASE_URL,
routes: [
{
path: '/login',
name: 'Login',
component: Login,
meta: {
title: '登录'
}
},
{
path: '/register',
name: 'Register',
component: Register,
meta: {
title: '注册'
}
},
{
path: '/setting',
name: 'Setting',
component: Setting,
meta: {
breadcrumb: '设置',
requireLogin: true
},
}
]
})
路由拦截:
关于vue 路由拦截参考：https://www.cnblogs.com/cckui/p/10319013.html
// 页面刷新时，重新赋值token
if (localStorage.getItem('token')) {
store.commit('BIND_LOGIN', localStorage.getItem('token'))
}
// 全局导航钩子
router.beforeEach((to, from, next) => {
if (to.meta.title) { // 路由发生变化修改页面title
document.title = to.meta.title
}
if (to.meta.requireLogin) {
if (store.getters.token) {
if (Object.keys(from.query).length === 0) { // 判断路由来源是否有query，处理不是目的跳转的情况
next()
} else {
let redirect = from.query.redirect // 如果来源路由有query
if (to.path === redirect) { // 避免 next 无限循环
next()
} else {
next({ path: redirect }) // 跳转到目的路由
}
}
} else {
next({
path: '/login',
query: { redirect: to.fullPath } // 将跳转的路由path作为参数，登录成功后跳转到该路由
})
}
} else {
next()
}
})
export default router
3.4 Axios 封装
封装 Axios
// axios 配置
import axios from 'axios'
import store from './store'
import router from './router'
//创建 axios 实例
let instance = axios.create({
timeout: 5000, // 请求超过5秒即超时返回错误
headers: { 'Content-Type': 'application/json;charset=UTF-8' },
})
instance.interceptors.request.use(
config => {
if (store.getters.token) { // 若存在token，则每个Http Header都加上token
config.headers.Authorization = `token ${store.getters.token}`
console.log('拿到token')
}
console.log('request请求配置', config)
return config
},
err => {
return Promise.reject(err)
})
// http response 拦截器
instance.interceptors.response.use(
response => {
console.log('成功响应：', response)
return response
},
error => {
if (error.response) {
switch (error.response.status) {
case 401:
// 返回 401 (未授权) 清除 token 并跳转到登录页面
store.commit('BIND_LOGOUT')
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
})
break
default:
console.log('服务器出错，请稍后重试！')
alert('服务器出错，请稍后重试！')
}
}
return Promise.reject(error.response) // 返回接口返回的错误信息
}
)
export default {
// 发送验证码
userVerify (data) {
return instance.post('/api/verify', data)
},
// 注册
userRegister (data) {
return instance.post('/api/register', data)
},
// 登录
userLogin (data) {
return instance.post('/api/login', data)
},
// 获取用户列表
getAllUser () {
return instance.get('/api/alluser')
},
// 删除用户
delUser (data) {
return instance.post('/api/deluser', data)
}
}
4. 服务端和数据库实现
在根目录下创建 server 文件夹，存放服务端和数据库相关代码。
4.1 MongoDB和Redis
创建 /server/dbs/config.js ，进行数据库和邮箱配置
// mongo 连接地址
const dbs = 'mongodb://127.0.0.1:27017/[数据库名称]'
// redis 地址和端口
const redis = {
get host() {
return '127.0.0.1'
},
get port() {
return 6379
}
}
// qq邮箱配置
const smtp = {
get host() {
return 'smtp.qq.com'
},
get user() {
return '1********@qq.com' // qq邮箱名
},
get pass() {
return '*****************' // qq邮箱授权码
},
// 生成邮箱验证码
get code() {
return () => {
return Math.random()
.toString(16)
.slice(2, 6)
.toUpperCase()
}
},
// 定义验证码过期时间rules，5分钟
get expire() {
return () => {
return new Date().getTime() + 5 * 60 * 1000
}
}
}
module.exports = {
dbs,
redis,
smtp
}
使用 qq 邮箱发送验证码，需要在“设置/账户”中打开POP3/SMTP服务和MAP/SMTP服务。
4.2 Mongo 模型
创建 /server/dbs/models/users.js:
// users模型，包括四个字段
const mongoose = require('mongoose')
const Schema = mongoose.Schema
const UserSchema = new Schema({
username: {
type: String,
unique: true,
required: true
},
password: {
type: String,
required: true
},
email: {
type: String,
required: true
},
token: {
type: String,
required: true
}
})
module.exports = {
Users: mongoose.model('User', UserSchema)
}
4.3 接口实现
创建 /server/interface/user.js:
const Router = require('koa-router')
const Redis = require('koa-redis') // key-value存储系统, 存储用户名，验证每个用户名对应的验证码是否正确
const nodeMailer = require('nodemailer') // 通过node发送邮件
const User = require('../dbs/models/users').Users
const Email = require('../dbs/config')
// 创建和验证token, 参考4.4
const createToken = require('../token/createToken.js') // 创建token
const checkToken = require('../token/checkToken.js') // 验证token
// 创建路由对象
const router = new Router({
prefix: '/api' // 接口的统一前缀
})
// 获取redis的客户端
const Store = new Redis().client
// 接口 - 测试
router.get('/test', async ctx => {
ctx.body = {
code: 0,
msg: '测试',
}
})
// 发送验证码 的接口
router.post('/verify', async (ctx, next) => {
const username = ctx.request.body.username
const saveExpire = await Store.hget(`nodemail:${username}`, 'expire') // 拿到过期时间
console.log(ctx.request.body)
console.log('当前时间:', new Date().getTime())
console.log('过期时间：', saveExpire)
// 检验已存在的验证码是否过期，以限制用户频繁发送验证码
if (saveExpire && new Date().getTime() - saveExpire < 0) {
ctx.body = {
code: -1,
msg: '发送过于频繁，请稍后再试'
}
return
}
// QQ邮箱smtp服务权限校验
const transporter = nodeMailer.createTransport({
/**
* 端口465和587用于电子邮件客户端到电子邮件服务器通信 - 发送电子邮件。
* 端口465用于smtps SSL加密在任何SMTP级别通信之前自动启动。
* 端口587用于msa
*/
host: Email.smtp.host,
port: 587,
secure: false, // 为true时监听465端口，为false时监听其他端口
auth: {
user: Email.smtp.user,
pass: Email.smtp.pass
}
})
// 邮箱需要接收的信息
const ko = {
code: Email.smtp.code(),
expire: Email.smtp.expire(),
email: ctx.request.body.email,
user: ctx.request.body.username
}
// 邮件中需要显示的内容
const mailOptions = {
from: `"认证邮件" <${Email.smtp.user}>`, // 邮件来自
to: ko.email, // 邮件发往
subject: '邀请码', // 邮件主题 标题
html: `您正在注册****，您的邀请码是${ko.code}` // 邮件内容
}
// 执行发送邮件
await transporter.sendMail(mailOptions, (err, info) => {
if (err) {
return console.log('error')
} else {
Store.hmset(`nodemail:${ko.user}`, 'code', ko.code, 'expire', ko.expire, 'email', ko.email)
}
})
ctx.body = {
code: 0,
msg: '验证码已发送，请注意查收，可能会有延时，有效期5分钟'
}
})
// 接口 - 注册
router.post('/register', async ctx => {
const { username, password, email, code } = ctx.request.body
// 验证验证码
if (code) {
const saveCode = await Store.hget(`nodemail:${username}`, 'code') // 拿到已存储的真实的验证码
const saveExpire = await Store.hget(`nodemail:${username}`, 'expire') // 过期时间
console.log(ctx.request.body)
console.log('redis中保存的验证码：', saveCode)
console.log('当前时间:', new Date().getTime())
console.log('过期时间：', saveExpire)
// 用户提交的验证码是否等于已存的验证码
if (code === saveCode) {
if (new Date().getTime() - saveExpire > 0) {
ctx.body = {
code: -1,
msg: '验证码已过期，请重新申请'
}
return
}
} else {
ctx.body = {
code: -1,
msg: '请填写正确的验证码'
}
return
}
} else {
ctx.body = {
code: -1,
msg: '请填写验证码'
}
return
}
// 用户名是否已经被注册
const user = await User.find({ username })
if (user.length) {
ctx.body = {
code: -1,
msg: '该用户名已被注册'
}
return
}
// 如果用户名未被注册，则写入数据库
const newUser = await User.create({
username,
password,
email,
token: createToken(this.username) // 生成一个token 存入数据库
})
// 如果用户名被成功写入数据库，则返回注册成功
if (newUser) {
ctx.body = {
code: 0,
msg: '注册成功',
}
} else {
ctx.body = {
code: -1,
msg: '注册失败'
}
}
})
// 接口 - 登录
router.post('/login', async (ctx, next) => {
const { username, password } = ctx.request.body
let doc = await User.findOne({ username })
if (!doc) {
ctx.body = {
code: -1,
msg: '用户名不存在'
}
} else if (doc.password !== password) {
ctx.body = {
code: -1,
msg: '密码错误'
}
} else if (doc.password === password) {
console.log('密码正确')
let token = createToken(username) // 生成token
doc.token = token // 更新mongo中对应用户名的token
try {
await doc.save() // 更新mongo中对应用户名的token
ctx.body = {
code: 0,
msg: '登录成功',
username,
token
}
} catch (err) {
ctx.body = {
code: -1,
msg: '登录失败，请重新登录'
}
}
}
})
// 接口 - 获取所有用户 需要验证 token
router.get('/alluser', checkToken, async (ctx, next) => {
try {
let result = []
let doc = await User.find({})
doc.map((val, index) => {
result.push({
email: val.email,
username: val.username,
})
})
ctx.body = {
code: 0,
msg: '查找成功',
result
}
} catch (err) {
ctx.body = {
code: -1,
msg: '查找失败',
result: err
}
}
})
// 接口 - 删除用户 需要验证 token
router.post('/deluser', checkToken, async (ctx, next) => {
const { username } = ctx.request.body
try {
await User.findOneAndRemove({username: username})
ctx.body = {
code: 0,
msg: '删除成功',
}
} catch (err) {
ctx.body = {
code: -1,
msg: '删除失败',
}
}
})
module.exports = {
router
}
上面实现了五个接口：
- 发送验证码至邮箱： router.post('/verify')
- 注册：router.post('/register')
- 登录：router.post('/login')
- 获取用户列表：router.get('/alluser')
- 删除数据库中的某个用户：router.post('/deluser')
分别对应了前面 3.4 中 axios 中的5个请求地址
4.4 JSON Web Token 认证
JSON Web Token（缩写 JWT）是目前最流行的跨域认证解决方案。详情参考：http://www.ruanyifeng.com/blog/2018/07/json_web_token-tutorial.html
分别创建 /server/token/createToken.js 和 /server/token/checkToken.js
// 创建token
const jwt = require('jsonwebtoken')
module.exports = function (id) {
const token = jwt.sign(
{
id: id
},
'cedric1990',
{
expiresIn: '300s'
}
)
return token
}
// 验证token
const jwt = require('jsonwebtoken')
// 检查 token
module.exports = async (ctx, next) => {
// 检验是否存在 token
// axios.js 中设置了 authorization
const authorization = ctx.get('Authorization')
if (authorization === '') {
ctx.throw(401, 'no token detected in http headerAuthorization')
}
const token = authorization.split(' ')[1]
// 检验 token 是否已过期
try {
await jwt.verify(token, 'cedric1990')
} catch (err) {
ctx.throw(401, 'invalid token')
}
await next()
}
4.5 服务端入口
根目录创建 server.js:
// server端启动入口
const Koa = require('koa')
const app = new Koa();
const mongoose = require('mongoose')
const bodyParser = require('koa-bodyparser')
const session = require('koa-generic-session')
const Redis = require('koa-redis')
const json = require('koa-json') // 美化json格式化
const dbConfig = require('./server/dbs/config')
const users = require('./server/interface/user.js').router
// 一些session和redis相关配置
app.keys = ['keys', 'keyskeys']
app.proxy = true
app.use(
session({
store: new Redis()
})
)
app.use(bodyParser({
extendTypes: ['json', 'form', 'text']
}))
app.use(json())
// 连接数据库
mongoose.connect(
dbConfig.dbs,
{ useNewUrlParser: true }
)
mongoose.set('useNewUrlParser', true)
mongoose.set('useFindAndModify', false)
mongoose.set('useCreateIndex', true)
const db = mongoose.connection
mongoose.Promise = global.Promise // 防止Mongoose: mpromise 错误
db.on('error', function () {
console.log('数据库连接出错')
})
db.on('open', function () {
console.log('数据库连接成功')
})
// 路由中间件
app.use(users.routes()).use(users.allowedMethods())
app.listen(8888, () => {
console.log('This server is running at http://localhost:' + 8888)
})
5. 跨域处理
详情参考:https://www.cnblogs.com/cckui/p/10331432.html
vue 前端启动端口9527 和 koa 服务端启动端口8888不同，需要做跨域处理，打开vue.config.js:
devServer: {
port: 9527,
https: false,
hotOnly: false,
proxy: {
'/api': {
target: 'http://127.0.0.1:8888/', // 接口地址
changeOrigin: true,
ws: true,
pathRewrite: {
'^/': ''
}
}
}
}
6. 接口对接
import axios from '../../axios.js'
import CryptoJS from 'crypto-js' // 用于MD5加密处理
发送验证码：
// 用户名不能为空，并且验证邮箱格式
sendCode() {
let email = this.ruleForm2.email
if (this.checkEmail(email) && this.ruleForm2.username) {
axios.userVerify({
username: encodeURIComponent(this.ruleForm2.username),
email: this.ruleForm2.email
}).then((res) => {
if (res.status === 200 && res.data && res.data.code === 0) {
this.$notify({
title: '成功',
message: '验证码发送成功，请注意查收。有效期5分钟',
duration: 1000,
type: 'success'
})
let time = 300
this.buttonText = '已发送'
this.isDisabled = true
if (this.flag) {
this.flag = false;
let timer = setInterval(() => {
time--;
this.buttonText = time + ' 秒'
if (time === 0) {
clearInterval(timer);
this.buttonText = '重新获取'
this.isDisabled = false
this.flag = true;
}
}, 1000)
}
} else {
this.$notify({
title: '失败',
message: res.data.msg,
duration: 1000,
type: 'error'
})
}
})
}
}
注册:
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
axios.userRegister({
username: encodeURIComponent(this.ruleForm2.username),
password: CryptoJS.MD5(this.ruleForm2.pass).toString(),
email: this.ruleForm2.email,
code: this.ruleForm2.smscode
}).then((res) => {
if (res.status === 200) {
if (res.data && res.data.code === 0) {
this.$notify({
title: '成功',
message: '注册成功。',
duration: 2000,
type: 'success'
})
setTimeout(() => {
this.$router.push({
path: '/login'
})
}, 500)
} else {
this.$notify({
title: '错误',
message: res.data.msg,
duration: 2000,
type: 'error'
})
}
} else {
this.$notify({
title: '错误',
message: `服务器请求出错， 错误码${res.status}`,
duration: 2000,
type: 'error'
})
}
})
} else {
console.log("error submit!!");
return false;
}
})
},
登录：
login(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
axios.userLogin({
username: window.encodeURIComponent(this.ruleForm.name),
password: CryptoJS.MD5(this.ruleForm.pass).toString()
}).then((res) => {
if (res.status === 200) {
if (res.data && res.data.code === 0) {
this.bindLogin(res.data.token)
this.saveUser(res.data.username)
this.$notify({
title: '成功',
message: '恭喜，登录成功。',
duration: 1000,
type: 'success'
})
setTimeout(() => {
this.$router.push({
path: '/'
})
}, 500)
} else {
this.$notify({
title: '错误',
message: res.data.msg,
duration: 1000,
type: 'error'
})
}
} else {
this.$notify({
title: '错误',
message: '服务器出错，请稍后重试',
duration: 1000,
type: 'error'
})
}
})
}
})
},
7. 启动项目 测试接口
7.1 vue端：
$ npm run serve
7.2 启动mogod：
$ mongod
7.3 启动Redis：
$ redis-server
7.4 启动服务端server.js：
安装 nodemon 热启动辅助工具：
$ npm i nodemon
$ nodemon server.js
8. 项目目录
