Egg Cookie 操作

「这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战」

心若有所向往何惧道阻且长

持续更新中...

系列文章传送门：

Egg 入门基础知识 Egg 介绍与项目创建
Egg 入门基础知识 Egg 项目目录与控制器
Egg 入门基础知识 Egg 单元测试
Egg 入门基础知识 Egg 基本 HTTP 请求
Egg 入门基础知识 Egg 服务 Service
Egg 入门基础知识 Egg 模板渲染
Egg 入门基础知识 Egg Cookie 操作

了解 `Cookeie`

上文中我们学习了Egg模板渲染引擎-EJS ，本文中我们主要介绍 Cookie 的操作。

首先我们要搞懂什么是Cookie， Cookie实际上是一小段的文本信息（key-value格式）。客户端向服务器发起请求，如果服务器需要记录该用户状态，就使用 Response 向客户端浏览器颁发一个 Cookie 。客户端浏览器会把 Cookie 保存起来。

哪 Cookie有什么作用呢？当浏览器再请求该网站时，浏览器把请求的网址连同该 Cookie 一同提交给服务器。服务器检查该 Cookie ，以此来辨认用户状态。

HTTP 请求都是无状态的，但是我们的 Web 应用通常都需要知道发起请求的人是谁。为了解决这个问题，HTTP 协议设计了一个特殊的请求头：Cookie 。服务端可以通过响应头（set-cookie）将少量数据响应给客户端，浏览器会遵循协议将数据保存，并在下次请求同一个服务的时候带上（浏览器也会遵循协议，只在访问符合 Cookie 指定规则的网站时带上对应的 Cookie 来保证安全性）。

在我们对 Cookie 有所了解之后，我们就来在代码中进行 Cookie 操作

创建模板

Cookie 的基本操作分为增删改查（实际开发中 Cookie 的擦欧总应该在服务器端，而不是在客户的操作）。

我们在app/view 下创建 cookie.html 模板文件，在里面创建四个按钮分别是 增加Cookie 、 删除Cookie 、 修改Cookie 和 查看Cookie，对每个按钮绑定对应的事件，我们在事件通过 fetch 调用方法对 Cookie 进行增删改查，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>cookie 操作</title>
</head>
<body>
  <div>
    <button onclick="add()">增加Cookie</button>
    <button onclick="delelte()">删除Cookie</button>
    <button onclick="update()">修改Cookie</button>
    <button onclick="search()">查询Cookie</button>
  </div>
  <script>
    function add() {
      fetch('/addcookie', {
        method: 'post',
        headers: {
          "Content-type": "application/json"
        }
      });
    }
    function delelte() {
      fetch('/deletecookie', {
        method: 'post',
        headers: {
          "Content-type": "application/json"
        }
      });
    }
    function update() {
      fetch('/updatecookie', {
        method: 'post',
        headers: {
          "Content-type": "application/json"
        }
      });
    }

    function search() {
      fetch('/searchcookie', {
        method: 'post',
        headers: {
          "Content-type": "application/json"
        }
      });
    }
  </script>
</body>
</html>

很显然，我们还没有这样方法可以第调用，接下来我们来写这些方法

控制器

在 app/controller下创建 cookie.js 文件，在 cookie.js 文件中，首先写一个 cookie 方法用来渲染我们刚刚创建的 cookie.html 模板，然后在写在模板中使用的增删改查方法代码如下

'use strict';

const Controller = require('egg').Controller;

class CookieController extends Controller {
  async cookie() {
    const { ctx } = this;
    await ctx.render('cookie')
  }

  async add() {
    const { ctx } = this;
    ctx.cookies.set('user', 'vience')
    ctx.body = {
      code: 200,
      message: 'cookie 增加成功'
    }
  }

  async del() {
    const { ctx } = this;
    ctx.cookies.set('user', null)
    ctx.body = {
      code: 200,
      message: 'cookie 删除成功'
    }
  }

  async update() {
    const { ctx } = this;
    ctx.cookies.set('user', 'tangxd3')
    ctx.body = {
      code: 200,
      message: 'cookie 修改成功'
    }
  }

  async search() {
    const { ctx } = this;
    const user = ctx.cookies.get('user') || ''
    console.log('user: ', user);
    ctx.body = {
      code: 200,
      message: 'cookie 查询成功',
      data: user
    }
  }
}

module.exports = CookieController;

在控制器代码完成之后，我们在 /app/router.js 进行配置路由

// cookie 操作
router.get('/cookie', controller.cookie.cookie);
router.post('/addcookie', controller.cookie.add);
router.post('/deletecookie', controller.cookie.del);
router.post('/updatecookie', controller.cookie.update);
router.post('/searchcookie', controller.cookie.search);

效果

我们可以在控制台中的 Application 中查看 Cookie，

application

语法

ctx.cookies.set(key, value, options)

增加

ctx.cookies.set('user', 'vinece')

删除

ctx.cookies.set('user', null)

修改

ctx.cookies.set('user', 'tangxd3')

查询

ctx.cookies.get('user')

配置

ctx.cookies.set(key, value, options)的第三个参数是配置项，可以进行一些配置选项，比如有效时间、服务端操作设置和中文编写加密等操作。

有效事件（60s）

maxAge: 1000 * 60

服务端操作设置

是否只允许服务端修改，

当值为 false 时，可以在控制台通过 document.cookie 打印出 cookie 的值

当值为 true 时，在控制台通过 document.cookie 打印出 cookie 的值为空字符串

httpOnly: true

中文加密(当 cookie 值为中文时,可以使用 encrypt 加密存储,也可以使用 base64 较为麻烦)

encrypt: true

在增加和查询方法中的使用

// 增加方法
async add() {
  const { ctx } = this;
  ctx.cookies.set('user', 'vinece', {
    // 有效时间
    maxAge: 1000 * 60,
    // 是否只允许服务端修改，
    // 当值为false时，可以在控制台通过document.cookie打印出cookie的值
    // 当值为true时，在控制台通过document.cookie打印出cookie的值为空字符串
    httpOnly: true,
    // 是否加密(当cookie值为中文时,可以使用encrypt加密存储,也可以使用base64较为麻烦)
    encrypt: true
  })
  ctx.body = {
    code: 200,
    message: 'cookie 增加成功'
  }
}

// 修改方法
async search() {
  const { ctx } = this;
  const user = ctx.cookies.get('user', {
    // 通过 encrypt 设置为 true 进行解密
    encrypt: true
  }) || ''
  console.log('user: ', user);
  ctx.body = {
    code: 200,
    message: 'cookie 查询成功',
    data: user
  }
}

写在最后

关注我，更多内容持续输出

🌹 喜欢就点个赞吧👍🌹

🌹 觉得有收获的，可以来一波收藏+关注，以免你下次找不到我😁🌹

🌹欢迎大家留言交流，批评指正，转发请注明出处，谢谢支持！🌹

Egg Cookie 操作

持续更新中...

了解 Cookeie

创建模板

控制器

效果

语法

配置

写在最后

了解 `Cookeie`