Egg.js中Cookie和Session

news2024/11/23 18:45:50

Cookie

HTTP请求是无状态的,但是在开发时,有些情况是需要知道请求的人是谁的。为了解决这个问题,HTTP协议设计了一个特殊的请求头:Cookie。服务端可以通过响应头(set-cookie)将少量数据响应给客户端,浏览器会遵循协议将数据保留,并在下一次请求同一个服务的时候带上。

// html中插入DOM和JS方法
<div>
    <button onclick="add()">增加Cookie</button>
    <button onclick="del()">删除Cookie</button>
    <button onclick="editor()">修改Cookie</button>
    <button onclick="show()">查看Cookie</button>
</div>
<script>
    function add(){
        fetch("/add",{
            method:"post",
            headers:{
                "Content-type":"application/json"
            }
        });
    }
    function del(){
        fetch("/del",{
            method:"post",
            headers:{
                "Content-type":"application/json"
            }
        });
    }
    function editor(){
        fetch("/editor",{
            method:"post",
            headers:{
                "Content-type":"application/json"
            }
        });
    }
    function show(){
        fetch("/show",{
            method:"post",
            headers:{
                "Content-type":"application/json"
            }
        });
    }
</script>
async add() {
  const ctx = this.ctx
  ctx.cookies.set("user", "jspang.com")
  ctx.body = {
    status:200,
    data:'Cookie添加成功'
  }
}
async del() {
  const ctx = this.ctx
  ctx.cookies.set("user", null)
  ctx.body = {
    status:200,
    data:'Cookie删除成功'
  }
}
async editor() {
  const ctx = this.ctx
  ctx.cookies.set("user",'bilibili')
  ctx.body = {
    status:200,
    data:'Cookie修改成功'
  }
}
async show() {
  const ctx = this.ctx
  const user=ctx.cookies.get("user")
  console.log(user)
  ctx.body = {
    status:200,
    data:'Cookie显示成功'
  }
}

// 配置路由
router.post('/add', controller.zhuba.add);
router.post('/del', controller.zhuba.del);
router.post('/editor', controller.zhuba.editor);
router.post('/show', controller.zhuba.show);

image.png

image.png

配置和加密

一些配置选项,比如有效时间、服务端操作设置和中文编写加密这些操作。
ctx.cookies.set( ) 方法是有三个参数的,第一个参数是key,第二个参数是value,第三个参数就可以进行配置。比如你需要配置Cookie的有效时间,可以使用maxAge属性。(这个时间是毫秒。)

maxAge 时效设置

maxAge: 1000 * 2 (毫秒)

async add(){
  const ctx = this.ctx
  ctx.cookies.set("user","jspang.com",{
    maxAge:1000*2
  })
  ctx.body = {
    status:200,
    data:'Cookie添加成功'
  }
}
HhttpOnly 是否只允许服务端来操作Cookie

伪造Cookie来绕过登录是黑客经常使用的一种手段,所以为了安全,Egg.js默认设置只允许服务端来操作Cookie。
比如通过JS的方式document.cookie获取Cookie是不能获取的(需要在浏览器的控制台输入获取)。当我们想通过客户端操作Cookie时,可以通过下面的代码进行设置。

async add(){
  const ctx = this.ctx
  ctx.cookies.set("user","jspang.com",{
    maxAge:1000*60,
    httpOnly:false
  })
  ctx.body = {
    status:200,
    data:'Cookie添加成功'
  }
}
encrypt 设置中文Cookie (set加密 show解密)

加密只要在第三个参数中,加入encrypt:true,就可以加密成功。

ctx.cookies.set("user","zhuba",{
  encrypt:true
})

直接通过ctx.cookies.get( )方法获取,获取的是undefind,也就是无法获取的。这时候需要再次配置解密才可以使用, 在show( )方法里配置代码如下。

const user=ctx.cookies.get("user",{
  encrypt:true
})

Session

Cookie和Session非常类似,Egg中的Session就存储再Cookie中,但是Session比Cookie的安全性更高。所以在开发中经常使用Cookie来保存是否登录,而用Session来保存登录信息和用户信息。

添加、获取、删除

  • 添加:在add()方法中 ctx.session.username = ‘zhuba’
  • 获取:直接获取 const username = ctx.session.username
  • 删除:把值赋为空即可 ctx.session.username = null

session是支持中文的,不需要加密解密

配置项

config.session = {
    key :"PANG_SESS",   // 设置Key的默认值
    httpOnly:true,      // 设置服务端操作
    maxAge:1000*60  ,   // 设置最大有效时间
    renew: true,        // 页面有访问动作自动刷新session 
}

中间件的编写

Egg是对Koa的二次封装,所以中间件这部分和Koa框架是一样的,也追寻洋葱圈模型。

Egg.js约定中间件要写在/app/middleware文件夹下

module.exports = options => {
  return async (ctx, next) => {
    if (ctx.session.counter) { // 没学数据库先使用session
      ctx.session.counter++;
    } else {
      ctx.session.counter = 1;
    }
    await next();
  }
};

手动挂载:config/config.default.js config.middleware = [‘counter’];

在index()中使用, 可以发现中间件现在的作用域是全局的。

image.png

要想只在某一页面使用需要在router(路由)中配置中间件的使用,并去除全局挂载。

const counter = app.middleware.counter()
  const {
    router,
    controller,
  } = app;
  router.get('/', counter, controller.home.index);

在实际开发中中间件还是有很多用处的,比如日志的记录、比如所有页面的Gzip压缩展示、比如全局埋点的使用

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1266152.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

初识数据结构及复杂度

1、数据结构 数据结构数据结构&#xff08;描述和组织数据&#xff09;&#xff0c;Java会把一些数据结构封装起来&#xff0c;在java中数据结构叫做集合。 数据结构&#xff1a;&#xff08;data structer&#xff09;是计算机存储、组织数据的方式&#xff0c;指相互之间存在…

重温 re:Invent,分享十年成长:我和 re:Invent的故事

文章目录 前言背景我和re:Invent的交际历届峰会主题2012 突破技术垄断2013 革新数据服务2014 更好用的云服务2015 打通最后一-公里2016 迈向云上数据湖时代2017 重构云计算基础2018 云能力的再进化2019 赋能企业云架构服务2020 推动行业数据库服务的演进2021 无可比拟的云架构2…

网易区块链

目录 网易区块链 网易区块链 网易区块链成立于2017年,致力于Web3.0区块链技术的研发和应用。自主研发的区块链“天玄”引擎,在单链场景下支持每秒最高30万笔交易,单日可处理上链数据超10亿。 与国家信息中心、杭州互联网公证处等机构合作,支持公证信息存储与算法解决方案…

【并发编程五】c++进程通信——共享内存(shared memmory)

【并发编程四】c进程通信——共享内存&#xff08;shared memmory&#xff09; 一、共享内存&#xff08;shared memmory&#xff09;二、共享内存的过程1、processA 写入共享内存2、processB 读取共享内存 三、代码demo1、processA demo2、processB demo 四、输出五 、共享内存…

数学建模-基于LightGBM和BP神经网络的互联网招聘需求分析与预测

基于LightGBM和BP神经网络的互联网招聘需求分析与预测 整体求解过程概述(摘要) 就业是民生之本&#xff0c;是发展之基&#xff0c;也是安国之策。2020 年新冠肺炎疫情的爆发&#xff0c;稳就业成为应对疫情、稳定社会的重要保障之一。随着数据新动能的发展&#xff0c;互联网…

2023年全国硕士研究生入学统一考试管理类专业学位联考数学试题——解析版

文章目录 一、问题求解&#xff1a;真题&#xff08;2023-01&#xff09;-应用题-比例真题&#xff08;2023-02&#xff09;-应用题-利润真题&#xff08;2023-03&#xff09;-算术-分式真题&#xff08;2023-04&#xff09;-算术-有无理数真题&#xff08;2023-05&#xff09;…

let const 与var的区别

1、let可以形成块级作用域&#xff0c;在es6之前javascript只有函数作用域&#xff0c;没有块级作用域。在es6之前实现块级作用域: 2、可以看到通过一个立即执行函数表达式&#xff0c;我们实现了一个局部作用域或者块级作用域&#xff0c;但是有了let之后就不需要写这样的代…

从0开始学习JavaScript--JavaScript 箭头函数

JavaScript的现代语法&#xff0c;箭头函数&#xff08;Arrow Functions&#xff09;是一个不可忽视的重要部分。它们不仅提供了更简洁的语法&#xff0c;还改变了函数的作用域规则。在这篇文章中&#xff0c;将深入研究JavaScript箭头函数的概念、语法、用法以及它们与传统函数…

source: command not found错误的解决方法

偶遇的一个问题&#xff0c;因为在网上没有找到对应的解决办法&#xff0c;可能是属于个案&#xff0c;在此记录备忘&#xff0c;同时供大家参考。 问题现象&#xff1a; 执行命令 source /etc/profile时报错&#xff1a; bash: “source: command not found... 问题定位和…

电子签名软件,在教育行业中如何应用?

电子签名软件简化签署流程&#xff0c;降低签署门槛&#xff0c;让更多人便捷地参与到签署中来。 微签作为国内电子签名软件的拓荒者之一&#xff0c;拥有19年的研发应用经验&#xff0c;提供专业的企业电子签名服务。微签的电子签名软件广泛应用于审批场景&#xff0c;实现高…

Dropdown下拉菜单(antd-design组件库)简单用法和禁用菜单

1.Dropdown下拉菜单 向下弹出的列表。 2.何时使用 当页面上的操作命令过多时&#xff0c;用此组件可以收纳操作元素。点击或移入触点&#xff0c;会出现一个下拉菜单。可在列表中进行选择&#xff0c;并执行相应的命令。 用于收罗一组命令操作。 Select 用于选择&#xff0c;而…

C++: String类接口学习

文章目录 STL简介一. 为什么要有string类二. STL 中的 string 类介绍1. string 类描述2. 关于 basic_string 三. string 类的常用接口1. string 类的常见构造2. string 类的容量操作size 和 lengthcapacitymax_sizereserveresize 3. string 类对象的访问及遍历操作operator[] 和…

酷开系统 | 酷开科技聚焦价值人群 助力营销增长

2023年&#xff0c;是消费复苏回暖的一年&#xff0c;市场中充溢着大量品牌重启增长的机遇与实例。品牌商期望能够把握住市场趋势&#xff0c;通过营销获得确定性的业绩提升&#xff0c;并在未来收获长期稳定的增长。作为数字媒介的代表之一&#xff0c;OTT大屏营销的属性和价值…

深入浅出 Vue 中的插槽 slot

深入浅出 Vue 中的插槽 slot start 最近被问到好几次 Vue 中的插槽相关知识&#xff0c;掌握的还是有些不全面。抱着重新学习的心态&#xff0c;写这篇博客。首先对基础知识做一个回顾&#xff0c;然后再对源码实现做一个学习。作者&#xff1a;番茄编写时间&#xff1a;2023…

泄密零容忍!迅软科技打造设计图纸安全防线,助您无忧创作!

对于建筑设计、鞋服设计、动漫设计、平面设计等设计行业而言&#xff0c;海量设计图纸都以电子数据的形式存在企业的终端电脑上&#xff0c;这些图纸蕴含着企业的核心竞争资源&#xff0c;一旦泄露将给企业带来巨大的经济损失。 因此&#xff0c;迅软科技采用了先进的数据加密技…

自写一个函数将js对象转为Ts的Interface接口

如今的前端开发typescript 已经成为一项必不可以少的技能了&#xff0c;但是频繁的定义Interface接口会给我带来许多工作量&#xff0c;我想了想如何来减少这些非必要且费时的工作量呢&#xff0c;于是决定写一个函数&#xff0c;将对象放进它自动帮我们转换成Interface接口&am…

嵌入式总线技术详解

1. 总线概述 1.1 总线定义 总线&#xff08;Bus&#xff09;是计算机各种功能部件之间传送信息的公共通信干线它是由导线组成的传输线束&#xff0c;按照计算机所传输的信息种类&#xff0c;计算机的总线可以划分为数据总线、地址总线和控制总线&#xff0c;分别用来传输数据…

20天GMV超过百万美金!桌下迷你跑步机在TikTok Shop美国站热销

上周总GMV达到1.59亿美元&#xff0c;达到历史新高&#xff0c;是美国站自开通以来首次单周出单达到亿级&#xff1b;日均出单1660万美元&#xff0c;单日出单最高达2820万美元&#xff1b; 截至11月19日&#xff0c;GMV Top 5 的商品分类排名依次为&#xff1a;美妆个护、女士…

【vue脚手架配置代理+github用户搜索案例+vue项目中常用的发送Ajax请求的库+slot插槽】

vue脚手架配置代理github用户搜索案例vue项目中常用的发送Ajax请求的库slot插槽 1 vue脚手架配置代理2 github用户搜索案例2.1 静态列表2.2 列表展示2.3 完善案例 3 vue项目中常用的发送Ajax请求的库3.1 xhr3.2 jQuery3.3 axios3.4 fetch3.5 vue-resource 4 slot 插槽4.1 效果4…

【嵌入式】开源shell命令行的移植和使用(1)——nr_micro_shell

目录 一 背景说明 二 移植准备 三 移植过程 四 实际使用 一 背景说明 在进行调试和维护时&#xff0c;常常需要与单片机进行交互&#xff0c;获取、设置某些参数或执行某些操作&#xff0c;nr_micro_shell正是为满足这一需求&#xff0c;针对资源较少的MCU编写的基本命令行…