Vue 使用js-cookie

在 Vue.js 中使用 js-cookie 库来操作浏览器的 cookies 是一种常见的做法，尤其是在需要处理用户身份验证、会话管理或持久化存储时。js-cookie 提供了一个简单的 API 来方便地设置、获取和删除 cookies。

以下是如何在 Vue 项目中使用 js-cookie 库的步骤和示例：

1. 安装 js-cookie 库

首先，你需要通过 npm 或 yarn 安装 js-cookie 库：

npm install js-cookie

或者：

yarn add js-cookie

2. 在 Vue 中使用 js-cookie

你可以在 Vue 的组件中直接导入并使用 js-cookie 来操作 cookies。

示例：在 Vue 组件中使用 js-cookie

假设你需要在登录时存储用户的 token，并在用户访问某些页面时从 cookie 中获取该 token。

<template> <div> <h1>Vue with js-cookie</h1> <button @click="login">Login</button> <button @click="logout">Logout</button> <p v-if="token">Current Token: {{ token }}</p> </div> </template> <script> // 导入 js-cookie import Cookies from 'js-cookie' export default { data() { return { token: null, } }, methods: { // 模拟登录，设置 token login() { const token = 'some-random-token' // 假设登录后获取到的 token Cookies.set('user_token', token, { expires: 7 }) // 设置 cookie，7天过期 this.token = token }, // 模拟登出，删除 token logout() { Cookies.remove('user_token') // 删除 cookie this.token = null } }, created() { // 在页面加载时，尝试从 cookie 中获取 token const tokenFromCookie = Cookies.get('user_token') if (tokenFromCookie) { this.token = tokenFromCookie } } } </script>

3. 代码解析

• 安装和导入：

  • 使用 import Cookies from 'js-cookie' 导入 js-cookie 库，以便在 Vue 组件中调用它的 API。

• 设置 Cookie (Cookies.set)：

  • 在 login 方法中，使用 Cookies.set('user_token', token) 将 token 存储到 cookie 中。第二个参数是你要存储的值（例如，token），第三个参数是可选的配置选项，如 expires（设置 cookie 过期时间）和 path（设置 cookie 的路径）。

• 获取 Cookie (Cookies.get)：

  • 在 created 钩子中，通过 Cookies.get('user_token') 获取存储在 cookie 中的 token 并赋值给 this.token，这样就能在页面加载时检查用户是否已登录。

• 删除 Cookie (Cookies.remove)：

  • 在 logout 方法中，通过 Cookies.remove('user_token') 删除存储的 token。

4. 进阶配置：设置 cookie 选项

js-cookie 提供了很多有用的选项，帮助你更细粒度地控制 cookie。例如：

• expires：设置 cookie 的过期时间，可以是数字（天数）或 Date 对象。
• path：设置 cookie 的作用路径。默认情况下，cookie 只在当前路径和子路径下有效。
• secure：如果设置为 true，cookie 只有在通过 HTTPS 协议的连接中才能被发送。

例如，设置一个 7 天过期的 cookie，适用于整个网站：

Cookies.set('user_token', token, { expires: 7, path: '/', secure: true })

5. 在 Vuex 中使用 js-cookie（可选）

如果你在 Vue 项目中使用 Vuex 来管理应用的状态，你可以在 Vuex 的 actions 或 mutations 中操作 cookies，保存和读取用户的 token。

示例：在 Vuex 中使用 js-cookie

// store.js import Cookies from 'js-cookie' const store = new Vuex.Store({ state: { token: Cookies.get('user_token') || '' }, mutations: { SET_TOKEN(state, token) { state.token = token Cookies.set('user_token', token, { expires: 7 }) }, REMOVE_TOKEN(state) { state.token = '' Cookies.remove('user_token') } }, actions: { login({ commit }, token) { commit('SET_TOKEN', token) }, logout({ commit }) { commit('REMOVE_TOKEN') } } }) export default store

6. 总结

在 Vue 中使用 js-cookie 库非常方便，适合用于实现用户的身份验证、会话管理等功能。通过 Cookies.set、Cookies.get 和 Cookies.remove，你可以轻松地设置、获取和删除 cookies。结合 Vuex 可以更好地管理应用的状态，尤其是在需要跨页面共享身份信息时。

这样，你就可以在 Vue 应用中灵活地使用 cookies 存储用户的认证信息或者其他需要持久化的数据。