网站首页 > 技术文章 正文
前言
随着前后端服务的分离、主业务服务(java)的“下沉”,类似 BFF(Backends For Frontends)架构的雏形越来越多。node.js 一个能跑 js 的运行平台,让越来越多的前端工程师无语言学习障碍的加入了 node 服务端的阵营。
相信多数团队和我们一样,node 作为一个中间层连通着客户端和后端服务,处理着各种各样的事情。这篇就简单讲下 node 端如何转存 cookie 。
场景
先说下问题出现的场景,由于前端本来是接口 api 的使用者,导致很多问题没有遇到过,都是后端服务帮我们处理掉的。
但当 node 介入整个服务体系后,不可避免的就会碰到类似用户登录“失效”这类问题。可以看下如下这图:
注意到后一种方式,node 作为中间层充当着接口的传递者,你一定不会忘记处理来自后端的响应信息,但可能会忘记给客户端设置 cookie (如:红框内容),这样就导致一些忽视的问题。
cookie
好,再来看下 cookie ,这不是 http 协议里的东西,太简单了吧?的确是基础,但有时我们却会轻视这些东西。借这个机会快速过下:
http 无状态
我们都知道 http 是无状态的协议,每次请求服务端根本不知道之前客户端有什么情况。就此,就有 cookie 这样的机制,传递一些信息来帮助客户端和服务端建立起一定的关系,并持久化到浏览器,每次请求都把 cookie 发送给服务端,服务端解析后做逻辑处理。比如:用户登录等。
cookie 存储受那些影响
cookie 存储受 domain、path 的影响(端口除外),你不同的域名、访问地址都会影响到 cookie 的存储。你也不能获取不同域的 cookie 信息,这就是前端经常遇见的 跨域问题 ,这里不做展开,只希望你特别留一下 domain 和 path 两个属性。
实践
下图,是一个简单的客户端请求和服务端响应流程:
这里将通过代码来说明如何处理 1、2 两处中间层的交互,来使得最后的 cookie 能顺利给到客户端。
备注:代码基于 koa + axios
中间层接收后端服务 cookie
首先是服务端向客户端设置 cookie (用户登录成功后,会向客户端设置一个 token 信息,下次从 cookie 获取 token 来验证是否已登录)
我们已经知道 cookie 是受 domain 和 path 影响的,并且是无状态的。假设,后端的 domain 是写死的,一直是往(foo.com)存的,那么我们就需要在中间层重写 cookie 的 domain 和全部 cookie 信息。
ctx 是 koa 创装的全局对象。先请后端获取响应头中的 cookie 信息,解析出 cookie 的 key-value ,重写到 ctx.cookies 中。
中间层发送 cookie 到后端服务
这个比较容易,通过 ctx.headers 分别获取来自客户端的 cookie 和 host 信息,重新组织好 headers 通过 axios 发送给后端服务。这样后端就知道是哪个域名、哪个 cookie 内容了。
总结
自定义
如果后端比较“智能”,可以根据请求端的 host 来动态指定响应的 domain ,那么他不用把 cookie 固定往 foo.com 这个域名存。当然目前我们通过重写 cookie 就替后端完成了这样的操作,并且 cookie 的主导权落在了我们前端的手上。
节流
我们知道可能客户端会携带大量的 cookie 信息,它将严重影响网络请求和响应的速度。
当我们中间层 node 获得了 cookie 的主导权后,我们完全可以根据业务逻辑来过滤后端不需要的 cookie 信息,从而提升网站的速度。
比如,后端只需要一个 token 的 cookie 信息,那么我们重写 cookie 的时候就发 token 相关的数据即可。
虽然前端介入整个服务体系会使得工作量增加,但如果一切得法,会在某种程度减少整个二次开发的成本,通过 node 中间层的各种“协调”,使后端服务更“稳定”。
关于我
一位“前端工程师”,乐于实践,并分享前端开发经验。
如果有问题或者想法,欢迎各位评论留言,愿大家共同进步。
关注【前端雨爸】,查阅更多前端技术心得。
猜你喜欢
- 2024-11-22 Http无状态、Cookie、Session、Token三者之间的区别
- 2024-11-22 零基础web前端学习路线,前端入门到精通
- 2024-11-22 太多人把Cookie当缓存用,我无语了
- 2024-11-22 JavaScript知识点——详细的Cookie总结
- 2024-11-22 好程序员Web前端教程分享Cookie和Session有什么不同
- 2024-11-22 cookie、session、token区别
- 2024-11-22 Web前端cookie,sessionStorage的区别
- 2024-11-22 连环画解析“单点登录”原理,保证你能看懂
- 2024-11-22 前端中cookie和localStorage的区别
- 2024-11-22 前端鉴权的兄弟们:cookie、session、token、jwt、单点登录
你 发表评论:
欢迎- 07-10Oracle 与 Google Cloud 携手大幅扩展多云服务
- 07-10分享收藏的 oracle 11.2.0.4各平台的下载地址
- 07-10Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- 07-10Oracle Database@Azure 推进到南美等新区域并增加了新服务
- 07-10Oracle宣布推出 Oracle Database@AWS 的有限预览版
- 07-10Oracle与Nextcloud合作,推出主权云上的安全协作平台
- 07-10NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 07-10对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 601℃几个Oracle空值处理函数 oracle处理null值的函数
- 594℃Oracle分析函数之Lag和Lead()使用
- 581℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 579℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 573℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 567℃【数据统计分析】详解Oracle分组函数之CUBE
- 554℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 548℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
-
- Oracle 与 Google Cloud 携手大幅扩展多云服务
- 分享收藏的 oracle 11.2.0.4各平台的下载地址
- Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- Oracle Database@Azure 推进到南美等新区域并增加了新服务
- Oracle宣布推出 Oracle Database@AWS 的有限预览版
- Oracle与Nextcloud合作,推出主权云上的安全协作平台
- NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 解读丨《归档文件整理规则》— 电子文件元数据存储
- Data Guard跳归档恢复的实践(dataguard failover)
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端获取当前时间 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)