03——博客项目之登陆01

1.简介
2.cookie介绍
3.模拟服务器端修改cookie
4.cookie做限制

1.简介

• 核心：登陆校验 & 登陆信息存储
• 注册跟新建博客一样，而且现在一般都是手机验证码什么的了。

目录

• cookie 和 session
• session 写入 redis
• 开发登陆功能，和前端联调（用到nginx反向代理）

2.cookie

• 什么是cookie
• JavaScript操作cookie，浏览器中查看cookie
• server 端操作 cookie，实现登陆验证

什么是cookie？

• 存储在浏览器的一段字符串（最大5kb）
• 跨域不共享
• 格式如k1=v1;k2=v2;k3=k3；因此可以存储结构化数
• 每次发送 http 请求，会将请求域的 cookie 一起发送给 server
• server 端可以修改cookie并返回给浏览器
• 浏览器中也可以通过 JavaScript 修改 cookie（有限制）

客户端 JavaScript 操作 cookie

• 客户端查看cookie
  network的headers里、Appliciton的Storage的cookies里、控制台document.cookies查看
• JavaScript 查看、修改 cookie（有限制）
  document.cookie查看，本地修改cookie是累加的方式，即document.cookie = ****

server 端 nodejs 操作 cookie

• 查看cookie
• 修改cookie
• 实现登陆验证

app.js

// 解析cookie
    req.cookie = {}
    const cookieStr = req.headers.cookie || ''  //k1=v1;k2=v2;
    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)

1. cookie会随着请求带来服务器端，可通过req.headers.cookie获取
2. 由于cookie是k1=v1;k2=v2;形式的，我们希望转为对象形式
3. 当前还没有cookie，我们在客户端手动添加一个

document.cookie="name=wayliu"

4. 随便发送一个请求
   
   5.控制台

req.cookie is { name: 'wayliu' }

router/user.js 验证登陆路由

// 登陆验证的测试
    if (method === 'GET' && req.path === '/api/user/login-test') {
        if (req.cookie.username) {
            return Promise.resolve(new SuccessModel())
        }
        return Promise.resolve(new ErrorModel('尚未登陆'))
    }

还没有cookie，返回尚未登陆，可手动添加cookie验证。

document.cookie="username=wayliu"

3.模拟服务器端修改cookie

router/user.js 改写登陆路由，模拟服务器端修改cookie

// 登陆
    if (method === 'GET' && 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) {

                // 操作cookie
                // path 是生效路由
                res.setHeader('Set-Cookie', `username=${username}; path=/`)
                return new SuccessModel()
            }
            return new ErrorModel('登陆失败')
        }) 
    }

1. 用get方式模拟
2. 在路由中通过res.setHeader(‘Set-Cookie’, username=${username}; path=/)修改cookie

network的Response Headers中Set-cookie会有cookie，表示修改的 cookie。

然后访问login-test的时候，会把cookie带去服务器端，这就验证了cookie的一个流程。

4.cookie做限制

原因
由于客户端可以通过document.cookie=“***”手动修改cookie，导致不安全。
可以添加httpOnly:cookie只可以通过后端修改，前端不可以修改。

res.setHeader('Set-Cookie', `username=${username}; path=/; httpOnly`)

cookie做限制=》时间
router/user.js

// 获取 cookie 的过期时间
const getCookieExpires = () => {
    const d = new Date()
    d.setTime(d.getTime()+ (24*60*60*1000))
    return d.toGMTString()
}

通过 getCookieExpores()函数给当前时间加一天并返回GMT格式时间。

 res.setHeader('Set-Cookie', `username=${username}; path=/; httpOnly; expires=${getCookieExpires()}`)

服务器操作cookie返回添加上到期时间。

服务器端操作cookie总结

1. 通过req.cookie()获取cookie
2. 设置cookie

res.setHeader('Set-Cookie', `username=${username}; path=/; httpOnly; expires=${getCookieExpires()}`)