ssr 从文件导入服务器,Vue SSR, 在服务端请求数据时怎么带 cookies?
通过 express 取得 cookies
在 server.js 上引入 cookies 解析中间件
const cookieParser = require('cookie-parser')
并且在路由前面 use
app.use(cookieParser())
部份代码
const fs = require('fs')
const path = require('path')
const LRU = require('lru-cache')
const express = require('express')
const favicon = require('serve-favicon')
const compression = require('compression')
const microcache = require('route-cache')
const resolve = file => path.resolve(__dirname, file)
const { createBundleRenderer } = require('vue-server-renderer')
const isProd = process.env.NODE_ENV === 'production'
const useMicroCache = process.env.MICRO_CACHE !== 'false'
const serverInfo =
`express/${require('express/package.json').version} ` +
`vue-server-renderer/${require('vue-server-renderer/package.json').version}`
const app = express()
// cookie
const cookieParser = require('cookie-parser')
// 并且在路由前面 use
app.use(cookieParser())
将 cookies 注入 render 的上下文中
app.get('*', (req, res) => {
// 其他代码省略
const context = {
url: req.url,
cookies: req.cookies
}
const renderStream = renderer.renderToStream(context)
// 其他代码省略
})
vue 2.0的则改成这样
function render (req, res) {
const s = Date.now()
res.setHeader("Content-Type", "text/html")
// res.setHeader("Server", serverInfo)
// 改header
res.setHeader("Server", 'zibuzhai.com')
res.setHeader("X-Powered-By", 'zibuzhai.com')
const handleError = err => {
if (err.url) {
res.redirect(err.url)
} else if(err.code === 404) {
res.status(404).send('404 | Page Not Found')
} else {
// Render Error Page or Redirect
res.status(500).send('500 | Internal Server Error')
console.error(`error during render : ${req.url}`)
console.error(err.stack)
}
}
const context = {
title: 'title HN 2.0', // default title
keywords: 'keywords HN 2.0', // default keywords
description: 'description HN 2.0', // default description
url: req.url,
cookies: req.cookies
}
renderer.renderToString(context, (err, html) => {
if (err) {
return handleError(err)
}
res.send(html)
if (!isProd) {
console.log(`whole request: ${Date.now() - s}ms`)
}
})
}
app.get('*', isProd ? render : (req, res) => {
readyPromise.then(() => render(req, res))
})
将 cookies 注入 vuex 的 store 中
在server-entry.js文件中, 将 cookies 注入到 store 中
export default context => {
// 其他代码省略
if (context.cookies) {
store.state.cookies = context.cookies
}
// 其他代码省略
}
vue2.0后代码
export default context => {
return new Promise((resolve, reject) => {
const s = isDev && Date.now()
const { app, router, store } = createApp()
if (context.cookies) {
store.state.cookies = context.cookies
}
const { url } = context
const { fullPath } = router.resolve(url).route
if (fullPath !== url) {
return reject({ url: fullPath })
}
// set router's location
router.push(url)
// wait until router has resolved possible async hooks
router.onReady(() => {
const matchedComponents = router.getMatchedComponents()
// no matched routes
if (!matchedComponents.length) {
return reject({ code: 404 })
}
// Call fetchData hooks on components matched by the route.
// A preFetch hook dispatches a store action and returns a Promise,
// which is resolved when the action is complete and store state has been
// updated.
Promise.all(matchedComponents.map(({ asyncData }) => asyncData && asyncData({
store,
route: router.currentRoute,
cookies: context.cookies
}))).then(() => {
isDev && console.log(`data pre-fetch: ${Date.now() - s}ms`)
// After all preFetch hooks are resolved, our store is now
// filled with the state needed to render the app.
// Expose the state on the render context, and let the request handler
// inline the state in the HTML response. This allows the client-side
// store to pick-up the server-side state without having to duplicate
// the initial data fetching on the client.
context.state = store.state
resolve(app)
}).catch(reject)
}, reject)
})
}
这样就可以在组件中取到 cookies 了.
封装请求
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import settings from '../config'
// import store from '../store/index'
// import router from '../router/index'
import createRouter from '../router/index'
import createStore from '../store/index'
import Cookies from 'js-cookie';
Vue.use(VueAxios, axios)
const router = createRouter()
// const store = createStore()
// 动态设置本地和线上接口域名
Vue.axios.defaults.baseURL = settings.host
// 初始化
var configDefault = Vue.axios.defaults.headers
const parseCookie = cookies => {
let cookie = ''
if (cookies) {
Object.keys(cookies).forEach(item => {
cookie+= item + '=' + cookies[item] + '; '
})
}
return cookie
}
export const request = ({type = 'post', url, data = {}, config = {}, globalLoading = false} = {},cookies) => {
let requestCookies = ''
if (JSON.stringify(cookies) && JSON.stringify(cookies) != "{}") {
Object.keys(cookies).forEach(item => {
requestCookies += item + '=' + cookies[item] + '; '
})
}
if (requestCookies) {
let cookie = requestCookies
configDefault = {headers: {
'X-Requested-With': 'XMLHttpRequest',
cookie
}
}
// config = configDefault
}
config = configDefault
let datas = type === 'get' ? {params: data} : data
return Vue.axios[type](url, datas, config)
.catch(response => {
/* eslint-disable prefer-promise-reject-errors */
return Promise.reject({code: 500, message: '服务器繁忙!'})
})
.then((response) => {
// 统一loading
// store.commit('showAjaxLoading',false)
let {data} = response
if (typeof data === 'string') { // 转换返回json
data = JSON.parse(data)
}
console.log(data)
if (data && data.code == 200) {
// Promise.reject(data)
// 为什么不是router.query??
var redirect = router.currentRoute.query.redirect
if (redirect) {
console.log(redirect)
// 用location 不会报promise错,用router的跳转会报错
location.href = redirect
Promise.reject(data)
}
// 请求成功
return data
}
if (data.code === 400) {
// 统一报错弹窗
// store.commit('showAjaxMessage',true)
return data
}
if (data && data.code === 401) { // 没有登录权限
// router.replace({
// name: 'not',
// query: {redirect: router.currentRoute.path}
// })
// return data;
// location.href = '/#login'
// router.push('login?redirect='+router.currentRoute.path)
// router.push({ path: 'login', query: { redirect: router.currentRoute.path }})
// 用location 不会报promise错,用router的跳转会报错
// location.href = '/login?redirect='+router.currentRoute.path
// Promise.reject(data)
// console.log(router.currentRoute)
return data.data
} else {
return data;
}
return Promise.reject(data)
})
.catch(err => {
return Promise.reject(err)
})
}
发起带 cookies 参数的请求
export default {
name: 'Test',
data () {
return {
title:'服务端渲染test',
data: this.$store.state.count
}
},
mounted () {
},
created () {
// 检查cookie,ssr与spa不一样的地方
makelaravelcookie(this.$store.state.cookies)
console.log('this.$store.state.count')
console.log(this.$store.state.count)
},
asyncData ({ store, route }) {
console.log('asyncData')
// 触发 action 后,会返回 Promise
return store.dispatch('increment',store)
},
computed: {
user () {
// return 31
return this.$store.state.count
}
},
// seo
title () {
return this.user
},
}
vue 服务端渲染是通过asyncData来获取数据的
ssr 从文件导入服务器,Vue SSR, 在服务端请求数据时怎么带 cookies?相关推荐
- vue 文件导入服务器,Vue 如何import服务器上的js配置文件
背景 项目中有一个本地配置文件: // src/image-position.js export default { label: '首页', value: 'home', data: [ { lab ...
- 从零开始构建VUE 客户端和服务端SSR项目
一.服务端渲染 1.基本概念 Vue.js 是构建客户端应用程序的框架.默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM.然而,也可以将同一个组件渲染为服务器端的 HTM ...
- ssr Android简书,渲染篇一:服务端渲染(SSR)
导读 本文主要是从三个方面学习服务端渲染,内容整理自多个博客. 服务端渲染是什么?什么是服务端渲染?(服务端渲染的运行机制) 为什么使用服务端渲染?服务端渲染解决了什么问题? 什么情况下使用服务端渲染 ...
- nodejs ajax进度条,Ajax异步文件上传与NodeJS express服务端处理的示例分析
Ajax异步文件上传与NodeJS express服务端处理的示例分析 发布时间:2021-07-24 11:17:21 来源:亿速云 阅读:79 作者:小新 这篇文章主要介绍Ajax异步文件上传与N ...
- vue-cli快速构建vue项目和本地模拟请求数据
Vue-cli快速构建 Vue 项目和本地模拟请求数据 1 前提: 安装了 node.js 首先: 全局安装 vue-cli npm intsall vue-cli -g (-g代表全局安装) 2 使 ...
- java Socket Tcp示例三则(服务端处理数据、上传文件)
示例一: package cn.itcast.net.p5.tcptest; import java.io.BufferedReader; import java.io.IOException; im ...
- 物联网系统上位机源码,含服务器和客户端 物联网服务端程序
物联网系统上位机源码,含服务器和客户端 物联网服务端程序,可以接受市面上大多数透传数据的DTU登录,以及和DTU双向通讯 程序功能:能分组管理,不同的组别用户只可见自己组别的设备,设备和客户端登录掉线 ...
- foxmail文件导入服务器,Foxmail如何导入旧数据?Foxmail导入旧数据的方法
Foxmail如何导入旧数据?Foxmail升级到了新版本,如果您一直使用旧版本,则无需导入数据,如果想从Foxmail6.x升级到7.x,则需要导入旧版邮箱数据,那么如何导入呢!下面小编就给大家带来 ...
- excel文件导入hive乱码_将excel中的数据导入hive
步骤一:将excel另存为txt文档(文本文件(制表符分割))假设名字为CompanyCode.txt 步骤二,将该txt文件导入Linux指定目录中 步骤三,转换编码格式,在指定目录下执行如下命令: ...
- pac文件提取服务器,[工具使用] privoxy 实现 PAC 请求过滤
在 ubuntu 下使用 ss 下是不能够使用 PAC 文件进行过滤的.所有的网络请求都会通过 ss 转向服务器,导致有些不必要的网站访问速度过慢. 对于这个问题官方也不想解决,自行查看 github ...
最新文章
- Mybatis 使用的 9 种设计模式,真是太有用了
- 扩增子图表解读5火山图:差异OTU的数量及变化规律
- 每日一皮:即使是个小BUG,有时候也能吓你半条命!
- 讲故事的用户故事样例之1
- 信息学奥赛一本通(C++)在线评测系统——基础(一)C++语言——1080:余数相同问题
- 96秒100亿!如何抗住双11高并发流量?
- 文本分类中的特征词选择算法系列科普(前言AND 一)
- Vite+Vue3页面空白、图标不显示问题解决
- Java自动化邮件中发送图表(四)之javafx Chart
- Jmeter调试工具---HTTP Mirror Server
- 我被男朋友整整欺骗了两年可结果却让我感动!
- c c++ 宏定义中#, ##, #@的含义
- 在SQLServer软件导入文件与数据查询
- 计算机系统文字图片以啥子存在,电脑如何识别图片中文字的字体|电脑通过图片识别字体的方法...
- AWS中国EC2 80端口无法访问
- 如何配置服务器的安全?
- ZXing条形码识别框架识别的条型码的种类
- Unity导入图片尺寸大小和压缩格式的问题
- c35是什么意思_混凝土C35P6是什么意思
- android夜间切换失败,Android夜间模式切换记录
热门文章
- linux编译webengine,am3352请问如何在linux3.8上移植带有webengine的qt5?
- 读书笔记004:王阳明语录
- html表格ppt,HTML表格.ppt
- java日期函数_java常用日期函数总结
- PrepareStatement对象
- Java实现图片转pdf、pdf合并
- uc android flash插件,UC7.3 Android手机上网新体验 支持Flash游戏
- macd的python代码同花顺_MACD最全的运用方法!
- 什么是性能测试,性能测试的目的
- mysql跨库查询解决方案