当点击登录时候将cookie传给session进行加密处理,session内部会将加密结果返回
<div id="loginBox">登录</div>
<div id="isLoginBox">是否登录</div>
<div id="quitLogin">退出登录</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
<script>
axios.defaults.baseURL = 'http://127.0.0.1:8001'
// 第一步
axios.defaults.withCredentials = true
loginBox.addEventListener('click', async() => {
const data = await axios({
method: 'POST',
url: '/login',
data: {
user: '朱雀'
}
})
console.log(data.data.msg);
})
isLoginBox.addEventListener('click', async() => {
const data = await axios({
method: 'get',
url: '/islogin',
})
console.log(data.data.msg);
})
quitLogin.addEventListener('click', async() => {
const data = await axios({
method: 'get',
url: '/quitlogin',
})
console.log(data.data.msg);
})
npm i express-session
const express = require('express')
const session = require('express-session')
const cors = require('cors')
const app = express()
require('./mongo')
const userDB = require('./models')
app.use(cors({
origin: 'http://127.0.0.1:5500',
credentials: true
}))
app.use(express.json())
// 第一步
//前端向后端发送请求 在这里session生成一个cookie密钥返回给cookie(cookie-sid)session的内部操作
app.use(session({
secret: 'bfiabfaknbfalkh',
//存储时间
cookie: { maxAge: 1000 * 60 * 60 * 24 * 7 },
// 向服务端发起请求后 是否重置cookie的过期时间 建议true
rolling: true,
// 是否强制保存session 哪怕他没有变化
resave: false,
// 是否在session还未初始化时就存储 建议true 有利于前后鉴权
saveUninitialized: true
}))
app.post('/login', async (req, res) => {
// console.log(req.body);
// {user:'朱雀'}
const data = await userDB.findOne(req.body)
if (data) {
// console.log(req.session);
// 存储当前登录的用户信息
// 第二步
req.session.user = data
//将用户信息返回给前端
res.send({
msg: '已登录成功',
data: {
user: data.user,
age: data.age
}
})
} else {
res.send({
msg: '账户名错误,请确认后再登录'
})
}
})
//点击是否登录按钮
app.get('/islogin', (req, res) => {
// 校验有没有登录
// 确保 cookie里的connect-sid和你登录时设置的那个值一致 且没有过期 才能访问到 req.session.user
//session内部操作
console.log(req.session);//如果到时间里面的user会消失
// 第三步
const data = req.session.user
if (data) {
res.send({
msg: '您已登录',
data: {
user: data.user,
age: data.age
}
})
} else {
res.send({
msg: '您未登录,请登录后再操作'
})
}
})
app.get('/quitlogin', (req, res) => {
//销毁
req.session.destroy()
res.send({
msg: '退出登录成功'
})
})
app.listen(8001, () => console.log(`监听成功`))
session的一个小弊端就是由于req.session是一个对象当用户很多的时候里面会存很多用户不好管理占内存所以 出现了token
npm i connect-mongo
联合使用这个包将session存到数据库中去
const mongoStore = require('connect-mongo')
// 基础配置
module.exports = session({
name: '$admin',
//随机
secret: 'dhakhbdalkw',
//单位是ms
cookie: { maxAge: 7 * 24 * 60 * 60 * 1000 }, // 7天过期时间
//向服务发送请求后,是否重置cookie时间,建议true
rolling: true,
//是否强制重新保存session,即使它没有发生变化,建议false
resave: false,
//是否在session还未初始化时就存储,有利于前后鉴权,建议true
saveUninitialized: true,
//修改session的默认存储方式 默认存在服务端的内存中 避免占用内存 建议放数据库中
store: mongoStore.create({
// 与数据库连接地址要一致
mongoUrl: "mongodb://localhost:27017/vuecms" //数据库连接地址
})
})