当前位置：首页 > VUE

vue实现cookie

2026-02-10 07:18:30VUE

Vue 中操作 Cookie 的方法

在 Vue 项目中操作 Cookie 可以通过原生 JavaScript 或第三方库实现。以下是几种常见方法：

原生 JavaScript 操作 Cookie

使用 document.cookie API 进行基础操作：

// 设置 Cookie
document.cookie = 'username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/';

// 读取 Cookie
const cookies = document.cookie.split('; ');
const usernameCookie = cookies.find(c => c.startsWith('username='));
const username = usernameCookie ? usernameCookie.split('=')[1] : null;

// 删除 Cookie
document.cookie = 'username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';

使用 js-cookie 库

安装 js-cookie 库（推荐方式）：

npm install js-cookie

在 Vue 组件中使用：

import Cookies from 'js-cookie';

// 设置 Cookie
Cookies.set('token', 'abc123', { expires: 7 }); // 7天后过期

// 读取 Cookie
const token = Cookies.get('token');

// 删除 Cookie
Cookies.remove('token');

在 Vuex 中集成 Cookie

结合 Vuex 持久化存储场景：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
import Cookies from 'js-cookie';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    userToken: Cookies.get('token') || null
  },
  mutations: {
    setToken(state, token) {
      state.userToken = token;
      Cookies.set('token', token, { expires: 7 });
    },
    clearToken(state) {
      state.userToken = null;
      Cookies.remove('token');
    }
  }
});

安全注意事项

设置 HttpOnly 和 Secure 标志增强安全性：

// 原生方式
document.cookie = `sessionId=xyz; Secure; HttpOnly; SameSite=Strict`;

// js-cookie 方式
Cookies.set('sessionId', 'xyz', { 
  secure: true, 
  httpOnly: true, 
  sameSite: 'strict' 
});

响应式 Cookie 处理

创建 Vue 插件实现响应式 Cookie：

vue实现cookie

// plugins/cookie.js
import Vue from 'vue';
import Cookies from 'js-cookie';

const CookiePlugin = {
  install(Vue) {
    Vue.prototype.$cookie = {
      set(key, value, options) {
        return Cookies.set(key, value, options);
      },
      get(key) {
        return Cookies.get(key);
      },
      remove(key) {
        return Cookies.remove(key);
      }
    };
  }
};

Vue.use(CookiePlugin);

然后在 main.js 中引入即可全局使用 this.$cookie 方法。