1-Vue3 - vue3-cookies组件
about
无需多说，本篇主要介绍vue3中如何使用cookie。
install
安装
npm install vue3-cookies --save
OR
yarn add vue3-cookies
引入
引入的方式有几种不同的姿势。
引入方式1
如果你只是简单的操作cookie，那么直接在主文件main.py文件中配置一下就行：
import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
import $axios from "./utils/axios";
// 引入VueCookies
import VueCookies from 'vue3-cookies'
const app = createApp(App)
// use一下VueCookies
app.use(VueCookies)
// 添加到vue对象上，可以在全局通过 this.$axios来调用
app.config.globalProperties.$axios = $axios;
app.mount('#app') // 挂在放最后
然后，你在各个组件中，比如App.vue中，你就可以这么使用了：
<script setup>
// 因为在main.js中我们执行了app.use(VueCookies)，那么vue内部就会为vue对象绑定上cookie
// 所以我们可以通过proxy.$cookies来操作cookie了
// proxy相当于vue2中的this
import {getCurrentInstance} from 'vue'
const {proxy} = getCurrentInstance()
// 设置cookie
proxy.$cookies.set('k1', 'v1', '1h')
// 获取
console.log(proxy.$cookies.get('k1')) // v1
</script>
<template>
<div></div>
</template>
<style scoped>
</style>
引入方式2
引入方式1中，我们通过proxy对象来操作的cookie，这里再来介绍直接使用cookie对象来操作cookie。
main.js中代码不变：
import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
import $axios from "./utils/axios";
// 引入
import VueCookies from 'vue3-cookies'
const app = createApp(App)
// use一下VueCookies
app.use(VueCookies)
// 添加到vue对象上，可以在全局通过 this.$axios来调用
app.config.globalProperties.$axios = $axios;
app.mount('#app') // 挂在放最后
来看单独在组件中怎么用：
<script setup>
// 引入方式1
// 因为在main.js中我们执行了app.use(VueCookies)，那么vue内部就会为vue对象绑定上cookie
// 所以我们可以通过proxy.$cookies来操作cookie了
// proxy相当于vue2中的this
// import {getCurrentInstance} from 'vue'
// const {proxy} = getCurrentInstance()
// 引入方式2
import { useCookies } from "vue3-cookies";
const { cookies } = useCookies();
// 设置cookie
cookies.set('k2', 'v2', '1h')
// 获取
console.log(cookies.get('k2')) // v2
</script>
<template>
<div></div>
</template>
<style scoped>
</style>
或者其他的js文件中，比如axios.js：
import axios from 'axios'
// 引入cookie
import { useCookies } from "vue3-cookies";
const { cookies } = useCookies();
// 设置cookie
cookies.set('k3', 'v3', '1h')
// 获取
console.log(cookies.get('k3')) // v3
// $开头以示区分，你随便命名都行，
const $axios = axios.create({
baseURL: "http://httpbin.org",
timeout: 2000
})
export default $axios
常用方法
常用操作也非常简单：
<script setup>
// 引入方式2
import {useCookies} from "vue3-cookies";
const {cookies} = useCookies();
// 设置cookie
cookies.set('k2', 'v2', '1h')
// 获取
console.log(cookies.get('k2')) // v2
// 删除指定key
cookies.remove("k2")
// 判断某个key是否存在，返回true或者false
console.log(cookies.isKey("k2"))
// 获取所有的key的数组
console.log(cookies.keys()) // ['_ga', 'csrftoken', 'k1', 'k3', 'k4', 'k5']
//就能按照索引取值
console.log(cookies.keys()[0]) // _ga
// 想要获取值，需要自己处理，这里没有提供方法
let obj = {};
for (let key of cookies.keys()){
obj[key] = cookies.get(key)
}
console.log(obj)
</script>
<template>
<div></div>
</template>
<style scoped>
</style>
上面设置cookie的超时时间单位可以有：
| Unit | full name |
|---|---|
| y | year |
| m | month |
| d | day |
| h | hour |
| min | minute |
| s | second |
注意事项
无法获取httponly=True的值
我们来做个真实的演示。
基于Django3.2+restframework+vue3+axios+vue3-cookies来完成的。
前端
App.vue：
<script setup>
import {getCurrentInstance} from 'vue'
const {proxy} = getCurrentInstance()
proxy.$axios.get('http://127.0.0.1:8200/api/test/').then((res)=>{
console.log(res.data.code)
console.log(proxy.$cookies.keys());
// 指定httponly=true的cookie获取不到
console.log(proxy.$cookies.get('user')); // null
// 没有指定httponly=true的cookie是能获取到的
console.log(777, proxy.$cookies.get('name')); // likai
// 很明显，document.cookie中同样获取不到指定了httponly=true的cookie
console.log(document.cookie) // _ga=GA1.1.181234010.1667112062; csrftoken=FVsQQd0d23YKuk7Zk0x4FxNI8MBZIALshISquhqyVIPjnW5st9rQXrpShjcnrgQ8; k5=v5; name=likai
})
</script>
<template>
<div></div>
</template>
<style scoped>
</style>
main.js：
import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
import $axios from "./utils/axios";
// 引入
import VueCookies from 'vue3-cookies'
const app = createApp(App)
// use一下VueCookies
app.use(VueCookies)
// 添加到vue对象上，可以在全局通过 this.$axios来调用
app.config.globalProperties.$axios = $axios;
app.mount('#app') // 挂在放最后
axios.js：
import axios from 'axios'
const $axios = axios.create({
baseURL: "http://httpbin.org",
timeout: 2000,
withCredentials: true // 必须指定这个参数，否则axios才能携带参数
})
export default $axios
后端
首先用中间件解决跨域问题，我这里用的自定义的中间件设置响应头处理的。
middlewares.py：
from django.utils.deprecation import MiddlewareMixin
from django.http import HttpResponse
class AuthMiddleware(MiddlewareMixin):
""" 在这里处理前后端分离的跨域问题，这样前端不用任何处理 """
def process_request(self, request):
""" 在这里处理预检请求 """
# print(111, request.headers)
if request.method == "OPTIONS":
response = HttpResponse("")
response["Access-Control-Allow-Origin"] = "http://127.0.0.1:5173"
# response["Access-Control-Allow-Origin"] = "*"
response["Access-Control-Allow-Headers"] = "*"
response["Access-Control-Allow-Methods"] = "*"
response["Access-Control-Allow-Credentials"] = "true"
return response # 当发现请求是预检的options请求时，直接返回不做拦截
def process_response(self, request, response):
""" 其它复杂请求，都添加上各种响应头给客户端返回 """
# response["Access-Control-Allow-Origin"] = "*" # 如果axios请求不需要带cookie，用这个 "*" 就好了
# 下面一行是为了允许axios携带cookie，必须指定前端所在的域名
response["Access-Control-Allow-Origin"] = "http://127.0.0.1:5173"
# response["Access-Control-Allow-Origin"] = "*"
response["Access-Control-Allow-Headers"] = "*"
response["Access-Control-Allow-Methods"] = "*"
response["Access-Control-Allow-Credentials"] = "true" # 这个必须是"true"，否则人家不认
return response
settings.py：
MIDDLEWARE = [
'utils.middlewares.AuthMiddleware', # 跨域的中间件放到最上面
'django.middleware.security.SecurityMiddleware',
# 'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
# 'django.middleware.csrf.CsrfViewMiddleware',
# 'django.contrib.authentications.middleware.AuthenticationMiddleware',
# 'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
views.py：
from rest_framework.views import APIView
from rest_framework.response import Response
class TestView(APIView):
def get(self, request):
# 因为前端设置了axios允许携带cookie，我们从后端传过去的cookie，后端也都能拿到
print(request.COOKIES.get("user")) # zhangkai
print(request.COOKIES.get("name")) # likai
response = Response({'code': 0})
response.set_cookie('user', "zhangkai", expires=60, httponly=True)
response.set_cookie('name', "likai", expires=60, httponly=False)
return response
urls.py：
from django.urls import path, re_path
from api.views import account, basic, wallet
urlpatterns = [
path('api/test/', account.TestView.as_view())
]
