Cookies

这是标准化document.cookie的封装。

注意事项

除了处理cookie的标准方法外,还可以通过Cookie插件使用JSON对象读取和写入cookie。它还可以管理来自SSR的cookies。

Cookies API

TIP

对于Electron版本>=v1.12.2,Cookie插件在Electron环境中不起作用。您可能需要查找Electron Cookies文件。

安装


// quasar.config.js

return {
  framework: {
    plugins: [
      'Cookies'
    ]
  }
}

SSR的注意事项

构建SSR时,仅使用$q.cookies形式。 如果您需要使用import { Cookies } from 'quasar',则需要这样做:

import { Cookies } from 'quasar'

// 您需要访问`ssrContext`
function (ssrContext) {
  const cookies = process.env.SERVER
    ? Cookies.parseSSR(ssrContext)
    : Cookies // 否则我们在客户端

  // “cookies”等同于非SSR版本中的全局导入
}

ssrContext@quasar/app-vite启动文件@quasar/app-webpack启动文件中可用。还有在@quasar/app-vite 预取@quasar/app-webpack 预取功能中,它被作为一个参数提供。

这样做的原因是,在仅客户端的应用程序中,每个用户都将在其浏览器中使用该应用程序的新实例。 对于服务器端渲染,我们希望做到这一点:每个请求都应该有一个新鲜的、隔离的应用程序实例,这样就不会出现跨请求状态污染。 因此,Cookie需要分别绑定到每个请求。

读取一个Cookie

// 在Vue文件外
import { Cookies } from 'quasar'
const value = Cookies.get('cookie_name')

如果未设置cookie,则返回值为null

// 在Vue文件中
import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()
  const value = $q.cookies.get('cookie_name')
}

读取所有Cookie

// 在Vue文件外
import { Cookies } from 'quasar'
const cookies = Cookies.getAll()

cookies变量将是具有键值对(cookie_name:cookie_value)的对象。

// 在Vue文件中
import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()
  const allCookies = $q.cookies.getAll()
}

验证是否设置了Cookie

// 在Vue文件外
import { Cookies } from 'quasar'
Cookies.has('cookie_name') // Boolean
// 在Vue文件中
import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()
  const hasIt = $q.cookies.has('cookie_name')
}

写入一个Cookie

// 在Vue文件外
import { Cookies } from 'quasar'

Cookies.set('cookie_name', cookie_value)

// 或还传递选项:
Cookies.set('cookie_name', cookie_value, options)
// 在Vue文件外
import { Cookies } from 'quasar'

Cookies.set('quasar', 'framework', {
  secure: true
})
// 在Vue文件中
import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  $q.cookies.set('cookie_name', cookie_value)
  // 或在选项中也传递:
  $q.cookies.set('cookie_name', cookie_value, options)
}

(可选的)options参数是一个对象,下面将逐个属性说明。

选项: expires

expires: 10 // in 10 days
expires: -1 // yesterday
expires: 'Mon, 06 Jan 2020 12:52:55 GMT'
expires: new Date() // some JS Date Object
expires: '1d 3h 5m' // in 1 day, 3 hours, 5 minutes
expires: '2d' // in 2 days
expires: '15m 10s' // in 15 minutes, 10 seconds

定义cookie的生存期。 值可以是一个数字,可以将其解释为从创建之日算起的天数,也可以是Date对象。 如果省略,则该cookie成为会话cookie。

选项: path

path: '/'

定义cookie有效的路径。 默认情况下,cookie的路径是创建cookie的页面的路径(标准浏览器行为)。 例如, 如果要使其在整个域中可用,请使用路径:“/”。 默认值:创建cookie的页面路径。

选项: domain

domain: 'quasar.dev'

定义cookie有效的域。 默认值:创建Cookie的页面域。

选项: sameSite

sameSite: 'Strict'
// or
sameSite: 'Lax'

SameSite cookie使服务器要求不应该将cookie与跨站点(其中站点由可注册域名定义)一起发送,从而提供了一些保护以防范跨站点请求伪造攻击(CSRF)。

Strict - 如果同一站点的cookie具有此属性,则仅当请求来自设置cookie的网站时,浏览器才会发送cookie。 如果请求来自与当前位置的URL不同的URL,则不会包含任何带有Strict属性标记的cookie。

Lax - 如果属性设置为“Lax”,则跨站点子请求(例如调用加载图像或框架)将保留同站点Cookie,但当用户从外部站点导航至URL时将发送 ,例如,通过链接。

有关same-site设置的详细信息,请转到此处

选项: httpOnly

httpOnly: true

为了帮助缓解跨站点脚本(XSS)攻击,JavaScript的Document.cookie API无法访问HttpOnly cookie; 它们仅发送到服务器。 例如,持久化服务器端会话的cookie不需要对JavaScript可用,并且应该设置HttpOnly标志。

选项: secure

secure: true

如果为true,则cookie传输需要安全协议(HTTPS),并且不会通过HTTP发送。 默认值为false

TIP

如果使用Quasar CLI和开发模式,则可以通过quasar.config.js > devServer > https: true启用HTTPS。

选项: other

other: 'SomeNewProp'

其他Cookie选项的原始字符串。 为目前尚未在Quasar实现的可能的新属性而使用的最后手段。

删除一个Cookie

// 在Vue文件外
import { Cookies } from 'quasar'

Cookies.remove('cookie_name')

// 如果Cookie设置有路径和/或域之类的特定选项,
// 则在删除时还需要提供它们:
Cookies.remove('cookie_name', options)
// 在Vue文件中
import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  $q.cookies.remove('cookie_name')

  // 如果Cookie设置有路径和/或域之类的特定选项,
  // 则在删除时还需要提供它们:
  $q.cookies.remove('cookie_name', options)
}

WARNING

如果先前使用特定的path和/或domain设置了cookie,则只有通过options参数将相同的属性传递给remove()时,才能成功删除它。 这符合RFC6265。