在前端开发中，有时我们需要在客户端和服务端都可以访问到的 cookie。而解决这个问题的 npm 包就是 nuxt-universal-cookies。本文将介绍该 npm 包的使用方法以及实际应用场景和效果。

安装

使用 npm 安装该包：

npm install nuxt-universal-cookies

使用方法

在 Nuxt.js 中，我们可以在 plugin 中引用该包并注册到全局中。例如，在 plugins/cookies.js 中写入以下代码：

import Vue from 'vue'
import Cookies from 'nuxt-universal-cookies'

Vue.use(Cookies)

然后将该 plugin 引入 nuxt.config.js 中：

export default {
  plugins: [
    { src: '~/plugins/cookies.js', ssr: true }
  ]
}

接下来在一个 Vue 组件中使用 cookie：

-- -------------------- ---- -------
----- ----------- -------- -- -
  ----- --------- - -------------------------
  -- ----------- -
    ----- ---- - ----- -----------------------------------------
    ------ - ---- -
  - ---- -
    ---------------------------
  -
-

其中 $cookies 是 nuxt-universal-cookies 的实例。

应用场景

通过 nuxt-universal-cookies，我们可以在服务端和客户端都获取到同一个 cookie，从而可以实现以下场景：

1. 自动登录

通过保存用户的 token 或会话信息，我们可以在服务端验证用户身份，并在客户端中存储用户信息，实现自动登录的功能。

2. 主题设置

通过 cookie 存储用户的主题设置，客户端可以实现自动记录用户的主题喜好，例如暗黑模式、白天模式等。

示例代码

以下是使用 nuxt-universal-cookies 实现自动登录功能的示例代码：

欢迎你，{{ user.name }}

</template> <script> export default { data() { return { user: null, form: { username: '', password: '' } } }, async asyncData({ $cookies }) { const authToken = $cookies.get('authToken') if (authToken) { const user = await this.$axios.get(`/api/user/${authToken}`) return { user } } }, methods: { async login() { const res = await this.$axios.post('/api/login', this.form) if (res.status === 200) { const { authToken } = res.data this.$cookies.set('authToken', authToken, { path: '/', maxAge: 60 * 60 * 24 * 7 // 7 天过期 }) this.user = res.data.user } } } } </script>

总结

nuxt-universal-cookies 可以方便地解决客户端和服务端共享 cookie 的问题，实现一些功能，例如自动登录和主题设置。在使用时，记得通过插件将该包注册到全局中，并在需要的地方调用 $cookies 方法。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600572d481e8991b448e90a2

npm 包 nuxt-universal-cookies 使用教程

安装