Nuxt服务端请求及获取Cookie

介绍

nuxt.js是基于Vue的应用框架，它预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。它提供了一个asyncData方法可用于在服务端里异步的获取数据，它可以在页面组件每次加载前被调用。

使用

这里使用的是typescript的方式，asyncData方法获取到数据后会填充到data中，且asyncData方法在vue组件实例化之前被调用，因此无法获取到实例this。

方式一：使用axios

import axios from 'axios'
import { Component, Vue, } from "nuxt-property-decorator";
@Component({asyncData(context: any): Promise <any> {return axios.get('http://test-api/get/data').then(res => {return {title: res.data.title, list: res.data.list}})},
})
export default class Index extends Vue {}

方式二：使用async\await

import axios from 'axios'
import { Component, Vue, } from "nuxt-property-decorator";
@Component({async asyncData(context: any): Promise <any> {let {data} = await axios.get('http://test-api/get/data');return {title: data.title, list: data.list}},
})
export default class Index extends Vue {}

上面就是asyncData部分的使用方式，当页面第一次加载时会在服务端请求数据并填充到页面的data中。

获取Cookie

因为asyncData是会在服务端调用的，因此它无法和浏览器一样去获取Cookie，但是asyncData中的第一个参数是一个上下文对象，它在服务端调用时，我们可以访问用户请求的req和res对象，因此我们也可以通过它来获取我们对应的Cookie信息。

import axios from 'axios'
import { Component, Vue, } from "nuxt-property-decorator";
@Component({async asyncData(context: any): Promise <any> {let params = {name: 'tom',age: 20,token: '',};// 可以使用process.server检查是否在服务器端  if (process.server) {if (context.req && context.req.headers !== undefined) {// 获取Cookies信息let cookieArr = context.req.headers.cookie;if (!params.token) {params.token = getCookie('token', cookieArr)}}}let {data} = await axios.post('http://test-api/post/data', params);return {title: data.title, list: data.list}},})
export default class Index extends Vue {}//获取对应cookie方法function getCookie (name: string, strCookie: any) {let arrCookie = strCookie.split(';');let cookie = arrCookie.find(item => item.split('=')[0] === name);return cookie ? cookie.split('=')[1] : '';
}

结语

使用asyncData方法时需要注意上下文对象的一些参数是否可用，因为它同时应用在两个端，所以需要对一些参数进行判断之后在使用。

Nuxt服务端请求及获取Cookie相关推荐

nuxt 服务端渲染
nuxt 服务端渲染 1 nuxt 生命周期 1.1 服务端生命周期 middleware , plugins , validate 比较特殊,算成生命周期??? 服务端生命周期中, 无法拿到wind ...
服务端和客户端的cookie传递
文章目录一.现象二.过程三.定义 cookie的结构 cookie的分类一.客户端二. 服务端跨域问题踩过的一些坑总结一.现象 CSDN的登录界面下会有"两周内不再登录&q ...
Weblogic服务端请求伪造漏洞（SSRF）和反射型跨站请求伪造漏洞（CSS）修复教程...
一.服务端请求伪造漏洞服务端请求伪造(Server-Side Request Forgery),是指Web服务提供从用户指定的URL读取数据并展示功能又未对用户输入的URL进行过滤,导致攻击者可借助 ...
C#开发BIMFACE系列19 服务端API之获取模型数据4：获取多个构件的共同属性
系列目录 [已更新最新开发文章,点击查看详细] 在前几篇博客中介绍了一个三维文件/模型包含多个构建,每个构建又是由多种材质组成,每个构建都有很多属性.不同的构建也有可能包含相同的属性. 上图中 ...
C#开发BIMFACE系列20 服务端API之获取模型数据5：批量获取构件属性
系列目录 [已更新最新开发文章,点击查看详细] 在<C#开发BIMFACE系列18 服务端API之获取模型数据3:获取构件属性>中介绍了获取单个文件/模型的单个构建的属性,本篇介绍 ...
C#开发BIMFACE系列18 服务端API之获取模型数据3：获取构件属性
系列目录 [已更新最新开发文章,点击查看详细] 本篇主要介绍如何获取单文件/模型下单个构建的属性信息. 请求地址:GET https://api.bimface.com/data/v2/fil ...
C#开发BIMFACE系列9 服务端API之获取应用支持的文件类型
系列目录 [已更新最新开发文章,点击查看详细] BIMFACE最核心能力之一是工程文件格式转换.无需安装插件,支持数十种工程文件格式在云端转换,完整保留原始文件信息.开发者将告别原始文件解析烦 ...
web渗透测试----15、SSRF漏洞（服务端请求伪造漏洞）
SSRF漏洞是一种在未能获取服务器权限时,利用服务器漏洞,由攻击者构造请求,服务器端发起请求的安全漏洞,攻击者可以利用该漏洞诱使服务器端应用程序向攻击者选择的任意域发出HTTP请求. 很多Web应用都 ...
渗透测试-SSRF服务端请求伪造(Server-Side Request Forgery)
SSRF服务端请求伪造漏洞原理本次靶场的设计拓扑图 x.x.x.x:8080 - 判断 SSRF 是否存在 172.72.23.21 - SSRF 获取本地信息 172.72.23.1/24 - ...

Nuxt服务端请求及获取Cookie

Nuxt服务端请求及获取Cookie相关推荐

最新文章

热门文章