Node.js 从零开发 web server博客项目[登录]
web server博客项目
- Node.js 从零开发 web server博客项目[项目介绍]
- Node.js 从零开发 web server博客项目[接口]
- Node.js 从零开发 web server博客项目[数据存储]
- Node.js 从零开发 web server博客项目[登录]
- Node.js 从零开发 web server博客项目[日志]
- Node.js 从零开发 web server博客项目[安全]
- Node.js 从零开发 web server博客项目[express重构博客项目]
- Node.js 从零开发 web server博客项目[koa2重构博客项目]
- Node.js 从零开发 web server博客项目[上线与配置]
文章目录
- cookie
- 什么是 cookie
- JavaScript 操作 cookie , 浏览器中查看 cookie
- 客户端查看 cookie , 三种方式
- JavaScript 查看\修改 cookie ( 有限制 )
- server 端操作 cookie , 实现登录验证
- cookie做限制
- session
- session 存入 redis
- 和前端联调
cookie
-
什么是 cookie
- 存储在浏览器的一段字符串 ( 最大5kb )
- 跨域不共享
- 格式如 k1=v1; k2=v2; k3=v3; 因此可以存储结构化数据
- 每次发送 http 请求 , 会将请求域的 cookie 一起发送给 server
- server 可以修改 cookie 并返回给浏览器
- 浏览器中也可以通过 JavaScript 修改 cookie ( 有限制 )
-
JavaScript 操作 cookie , 浏览器中查看 cookie
-
客户端查看 cookie , 三种方式
- Network ->Reques Headers ->Cookie
- Application -> Cookie
document.cookie
-
JavaScript 查看\修改 cookie ( 有限制 )
document.cookie = 'foo=bar;'只能增加 cookie, 不能删除
-
server 端操作 cookie , 实现登录验证
app.js
// 解析 cookie
req.cookie = {}
const cookieStr = req.headers.cookie || '' // k1=v1; k2=v2; k3=v3
cookieStr.split(';').forEach(item => {
if (!item) {
return
}
const arr = item.split('=')
const key = arr[0]
const val = arr[1]
req.cookie[key] = val
})
console.log('req.cookie is: ', req.cookie)
// 在客户端中 document.cookie = 'username: zhangsan;'
// req.cookie is: { username: 'zhangsan' }
router/user.js
// 登录
if (method === 'GET' && path === '/api/user/login') {
// const {
// username,
// password
// } = req.body
const { username, password } = req.query
const result = login(username, password)
// if (result) {
// return new SuccessModel(result)
// } else {
// return new ErrorModel('登录失败')
// }
return result.then(data => {
if (data.username) {
// 操作 cookie
res.setHeader('Set-Cookie', `username=${data.username}; path=/`)
return new SuccessModel()
}
return new ErrorModel('登录失败')
})
}
// 登录验证测试
if (method === 'GET' && req.path === '/api/user/login-test') {
if (req.cookie.username) {
return Promise.resolve(
new SuccessModel({
username: req.cookie.username
})
)
}
return Promise.reject(
new ErrorModel('登录失败')
)
}
cookie做限制
在客户端当你登录成功后 ( username=lisi ) -> 删除 cookie ( username=lisi ) -> 添加 cookie ( username=zhangsan ) 会发现 用张三的账号操作的李四账号
router/user.js
const {
login
} = require('../controller/user')
const { SuccessModel, ErrorModel } = require('../model/resModel')
// 获取 cookie 的过期时间
const getCookieExpires = () => {
const d = new Date()
d.setTime(d.getTime() + (24 * 60 * 60 * 1000))
return d.toGMTString() // Mon, 08 Jul 2019 05:27:33 GMT
}
handleUserRouter = (req, res) => {
const {
method,
path
} = req
// 登录
if (method === 'GET' && path === '/api/user/login') {
// const {
// username,
// password
// } = req.body
const { username, password } = req.query
const result = login(username, password)
// if (result) {
// return new SuccessModel(result)
// } else {
// return new ErrorModel('登录失败')
// }
return result.then(data => {
if (data.username) {
// 操作 cookie
res.setHeader('Set-Cookie', `username=${data.username}; path=/; httpOnly; expires=${getCookieExpires()}`)
// path=/ 所有网站都生效
// httpOnly 只允许前端更改
// expires 过期时间
return new SuccessModel()
}
return new ErrorModel('登录失败')
})
}
// 登录验证测试
if (method === 'GET' && req.path === '/api/user/login-test') {
if (req.cookie.username) {
return Promise.resolve(
new SuccessModel({
username: req.cookie.username
})
)
}
return Promise.reject(
new ErrorModel('登录失败')
)
}
}
module.exports = handleUserRouter
session
- 上一节的问题 : 会暴露 username , 很危险
- 如何解决 : cookie 中存储 userid , server 端对应 username
- 解决方案 : session , 即 sever 端存储用户信息
app.js
// session 数据
const SESSION_DATA = {}
// 获取 cookie 的过期时间
const getCookieExpires = () => {
const d = new Date()
d.setTime(d.getTime() + (24 * 60 * 60 * 1000))
return d.toGMTString() // Mon, 08 Jul 2019 05:27:33 GMT
}
...
// 解析 session
let needSetCookie = false
let userId = req.cookie.userid
if (userId) {
if(!SESSION_DATA[userId]) {
SESSION_DATA[userId] = {}
}
} else {
needSetCookie = true
userId = `${Date.now()}_${Math.random()}`
SESSION_DATA[userId] = {}
}
req.session = SESSION_DATA[userId]
...
// 处理 user 路由
const userResult = handleUserRouter(req, res)
if (userResult) {
userResult.then(userData => {
if (needSetCookie) {
res.setHeader('Set-Cookie', `userid=${userId}; path=/; httpOnly; expires=${getCookieExpires()}`)
}
res.end(
JSON.stringify(userData)
)
})
return
}
router/user.js
return result.then(data => {
if (data.username) {
// 操作 cookie
res.setHeader('Set-Cookie', `userid=${data.userId}; path=/; httpOnly; expires=${getCookieExpires()}`)
// path=/ 所有网站都生效
// httpOnly 只允许前端更改
// expires 过期时间
// 设置 session
req.session.username = data.username
req.session.realname = data.realname
console.log('req.session is : ', req.session)
return new SuccessModel(req.session)
}
return new ErrorModel('登录失败')
})
}
// 登录验证测试
if (method === 'GET' && req.path === '/api/user/login-test') {
if (req.session.username) {
return Promise.resolve(
new SuccessModel({
username: req.session
})
)
}
return Promise.reject(
new ErrorModel('尚未登陆')
)
}
session 存入 redis
cnpm i redis -S- conf/db.js
const env = process.env.NODE_ENV // 环境参数
// 配置
let MYSQL_CONF
let REDIS_CONF
if (env === 'dev') {
// MySQL
MYSQL_CONF = {
host: 'localhost',
user: 'root',
password: 'root',
port: '3306',
database: 'myblog'
}
// redis
REDIS_CONF = {
port: 6379,
host: '127.0.0.1'
}
}
if (env === 'production') {
MYSQL_CONF = {
host: 'localhost',
user: 'root',
password: 'root',
port: '3306',
database: 'myblog'
}
// redis
REDIS_CONF = {
port: 6379,
host: '127.0.0.1'
}
}
module.exports = { MYSQL_CONF, REDIS_CONF }
- 创建
db/redis.js
const redis = require('redis')
const { REDIS_CONF } = require('../conf/db.js')
// 创建客户端
const redisClient = redis.createClient(REDIS_CONF.port, REDIS_CONF.host)
redisClient.on('error', err => {
console.error(err)
})
function set(key, val) {
if (typeof val === 'object') {
val = JSON.stringify(val)
}
redisClient.set(key, val, redis.print)
}
function get(key) {
const promise = new Promise((resolve, reject) => {
redisClient.get(key, (err, val) => {
if (err) {
reject(err)
return
}
if (val == null) {
resolve(null)
return
}
try {
resolve(
JSON.parse(val)
)
} catch (ex) {
resolve(val)
}
})
})
return promise
}
module.exports = {
set,
get
}
- router/blogs.js
const {
getList,
getDetail,
newBlog,
updateBlog,
delBlog
} = require('../controller/blog')
const { SuccessModel, ErrorModel } = require('../model/resModel')
// 统一的登录验证函数
const loginCheck = (req) => {
if (!req.session.username) {
return Promise.resolve(
new ErrorModel('尚未登录')
)
}
}
const handleBlogRouter = (req, res) => {
const method = req.method // GET POST
const id = req.query.id
// 获取博客列表
if (method === 'GET' && req.path === '/api/blog/list') {
let author = req.query.author || ''
const keyword = req.query.keyword || ''
// const listData = getList(author, keyword)
// return new SuccessModel(listData)
if (req.query.isadmin) {
// 管理员界面
const loginCheckResult = loginCheck(req)
if (loginCheckResult) {
// 未登录
return loginCheckResult
}
// 强制查询自己的博客
author = req.session.username
}
const result = getList(author, keyword)
return result.then(listData => {
return new SuccessModel(listData)
})
}
// 获取博客详情
if (method === 'GET' && req.path === '/api/blog/detail') {
// const data = getDetail(id)
// return new SuccessModel(data)
const result = getDetail(id)
return result.then(data => {
return new SuccessModel(data)
})
}
// 新建一篇博客
if (method === 'POST' && req.path === '/api/blog/new') {
// const data = newBlog(req.body)
// return new SuccessModel(data)
const loginCheckResult = loginCheck(req)
if (loginCheckResult) {
// 未登录
return loginCheckResult
}
req.body.author = req.session.username
const result = newBlog(req.body)
return result.then(data => {
return new SuccessModel(data)
})
}
// 更新一篇博客
if (method === 'POST' && req.path === '/api/blog/update') {
const loginCheckResult = loginCheck(req)
if (loginCheckResult) {
// 未登录
return loginCheckResult
}
const result = updateBlog(id, req.body)
return result.then(val => {
if (val) {
return new SuccessModel()
} else {
return new ErrorModel('更新博客失败')
}
})
}
// 删除一篇博客
if (method === 'POST' && req.path === '/api/blog/del') {
const loginCheckResult = loginCheck(req)
if (loginCheckResult) {
// 未登录
return loginCheckResult
}
const author = req.session.username
const result = delBlog(id, author)
return result.then(val => {
if (val) {
return new SuccessModel()
} else {
return new ErrorModel('删除博客失败')
}
})
}
}
module.exports = handleBlogRouter
- router/user.js
const { login } = require('../controller/user')
const { SuccessModel, ErrorModel } = require('../model/resModel')
const { set } = require('../db/redis')
const handleUserRouter = (req, res) => {
const method = req.method // GET POST
// 登录
if (method === 'POST' && req.path === '/api/user/login') {
const { username, password } = req.body
// const { username, password } = req.query
const result = login(username, password)
return result.then(data => {
if (data.username) {
// 设置 session
req.session.username = data.username
req.session.realname = data.realname
// 同步到 redis
// console.log(req.session)
set(req.sessionId, req.session)
return new SuccessModel()
}
return new ErrorModel('登录失败')
})
}
}
module.exports = handleUserRouter
-
和前端联调
- 登录功能依赖 cookie , 必须用浏览器来联调
- cookie 跨域不共享 , 前端和 server 端必须同域
- 需要用到 nginx 做代理 , 让前后端端同域