位置: 编程技术 - 正文

浅谈Vue SSR 的 Cookies 问题(ssm vue)

编辑:rootadmin

推荐整理分享浅谈Vue SSR 的 Cookies 问题(ssm vue),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3 ssr,vuejs ssr,vue的ssr是什么,vue ssr cdn,vue ssr seo,vue的ssr是什么,vue的ssr是什么,vue的ssr是什么,内容如对您有帮助,希望把文章链接给更多的朋友!

一个网站一旦涉及到多用户, 就很难从 Cookies 中逃脱, Vue SSR 的 cookies 也真算是遇到的一个不小的问题, 从开始玩 SSR 开始到现在, 一共想出了3种方案, 从最早的把 Cookies 注入到 state 中, 到把 Cookies 注入到 global, 到现在的将 Cookies 注入到组件的 asyncData 方法.

随着 Vue 的升级, 第一种方案已经不再适用, 第二种也有不少的限制, 于是想到第三种方案, 下来就说说具体实现的方法:

第一种方案

第一种方案已经不再适用, 这里不再细说

第二种方案

思路: 将 cookies 注入到 ssr 的 context里, 然后在请求 api 时读取, 再追加到 axios 的header 里

1, 首先在 server.js 里将 cookies 加到 context里

之后, Vue 会把 context 加到 global.__VUE_SSR_CONTEXT__

2, 在 api.js 里读取 cookies

为什么可以这么做&#;

默认情况下,Vue 对于每次渲染,bundle renderer 将创建一个新的 V8 上下文并重新执行整个 bundle。应用程序代码与服务器进程隔离, 所以每个访问的用户上下文都是独立的, 不会互相影响.

但是从Vue@2.3.0开始, 在createBundleRenderer方法的选项中, 添加了runInNewContext选项, 使用 runInNewContext: false,bundle 代码将与服务器进程在同一个 global 上下文中运行,所以我们不能再将 cookies 放在 global, 因为这会让所有用户共用同一个 cookies.

为什么现在不这么做&#;

那我们继续将runInNewContext设置成true, 不就好了吗&#; 当然也是可以的, 但是重新创建上下文并执行整个 bundle 还是相当昂贵的,特别是当应用很大的时候.

浅谈Vue SSR 的 Cookies 问题(ssm vue)

以我自己的博客为例, 之前只有渲染 5 个路由组件, loadtest 的 rps, 有 左右, 但是后来把后台的 个路由组件也加到 SSR 后, rps 直接降到了个位数...

所以出现了现在的第三种方案

第三种方案

思路: 将 Cookies 作为参数注入到组件的asyncData方法, 然后用传参数的方法把 cookies 传给 api, 不得不说这种方法很麻烦, 但是这是个人能想到的比较好的方法

步骤1:

还是在 server.js 里, 把 cookies 注入到 context 中

步骤2:

在entry-server.js里, 将cookies作为参数传给 asyncData 方法

步骤3:

在组件里, 把 cookies 做为参数给 Vuex 的 actions

步骤4:

在 Vuex 里将 cookies 做为参数给 api

这里一定要注意, state 一定要用函数返回值来初始化 state, 不然会导致所有用户共用 state

步骤5:

在 api 里接收 cookies, 并加到 axios 的 headers 里

如果你没有将 axios 重新封装, 那么也可以把第五步省略, 直接在第四部把 cookies 给 axios 即可

方案 2 具体实例: 3 具体实例: 如果你项目不大, 还是直接用方案 2 吧, 项目有很多页面, 并且大部分页面是每个用户都一样的, 可以考虑方案 3, 或者你有什么更好的方法, 欢迎讨论

Vue SSR 对需要 SEO, 并且每个用户看到的内容都是一致的, 配合缓存, 将是一个非常好的体验...

标签: ssm vue

本文链接地址:https://www.jiuchutong.com/biancheng/377401.html 转载请保留说明!

上一篇:Vue 中批量下载文件并打包的示例代码(vue实现下载功能)

下一篇:AngularJS实现自定义指令及指令配置项的方法(angular script)

  • 增值税一般纳税人税率
  • 工业企业结转成本表格模板
  • 新成立小规模纳税人开发票如何办理
  • 小规模纳税人需要做进项税吗
  • 免抵税额什么时候缴纳城建税
  • 费用挂账的会计分录怎么做
  • 哪个税种不需要认定就能在电子税务局申报
  • 非主营业务收入计入什么科目
  • 季报申报之后还可以改吗?
  • 如何去办理小型微利企业资格每年都需要认证吗?
  • 客户退货的会计分录
  • 机器设备折旧计提规定
  • 公司聘请专家的差旅费可以税前扣除吗
  • 股票收益收税吗
  • 金税盘非征期汇总资料未报送
  • 实收资本印花税申报期限
  • 试运营和正式运营间隔
  • 建筑公司收取的劳务费和挂靠管理费有区别吗?
  • 企业的其他业务是什么
  • 工程竣工结算审查期限
  • 资产负债表资产总额为负数
  • 土地开垦费怎么征收
  • 开发支出会计科目
  • 1697510703
  • 工会年度收入支出表
  • 主营业务收入多计跨年调整
  • tplink路由器手机怎么设置
  • 增值税发票的进项和出项要一致吗
  • 超市购物卡返点一般是几个点
  • 进项发票大过销项,退税只退13个点的增值税吗
  • 家具有限公司
  • 微信订阅项目
  • i911900k与10900k
  • 应交增值税的会计科目怎么做
  • 年度企业所得税计算方法
  • Python之ImportError: DLL load failed: 找不到指定的模块解决方案
  • 社会保险费缓缴政策
  • thinkphp整合layuiadmin
  • 业务招待费用列支范围
  • 公司缴纳残保金怎么做账
  • thinkphp上传文件
  • 科罗拉多河上的月光简谱
  • 支付个人赔偿款入账
  • css加小手
  • vue全家桶教程
  • 微软调整bing输入字数
  • phpstudy命令行
  • 主营业务成本入账分录
  • 代理业务怎么记账
  • php static变量
  • 一般人转小规模政策到什么时候
  • python中事件处理的方法
  • 资产减值损失账户核算内容
  • mongodb 数据文件
  • mongodb查看数据库大小
  • 购买铝材会计分录
  • 进项票和销项票是什么意思
  • 劳务公司核定征收怎么交税的
  • 公司基建维修承诺书
  • 工伤保险交了就可以报销吗
  • 记账凭证可以先做贷方吗
  • 会计软件入什么科目
  • 个人独资企业交什么税
  • centos安装软件教程
  • 注册表 命令
  • 如何查看文件系统
  • 微软系统win10
  • linux find 查找文件并重命名
  • linux系统中怎么输入中文
  • linux怎么那么难用
  • Win10系统的电脑可装Wlin7系统吗
  • win10 mobile 1709
  • windows桌面卡
  • node stream原理
  • 菜鸟教程安卓开发
  • unity ui控件
  • unity图集
  • js中split方法的作用
  • js检查邮箱格式
  • JavaScript的History API使搜索引擎抓取AJAX内容
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设