一个应用必不可少的功能就是 token 验证，通常我们在登录后把返回的验证信息存储起来，之后请求带上 token 供后端验证状态。在前后端分离的项目中，一般都会存放到本地存储中。但 Nuxt.js 不同，由于服务端渲染的特点，部分请求在服务端发起，我们无法获取 localStorage 或 sessionStorage。

这时候，cookie 就派上了用场。cookie 不仅能在客户端供我们操作，在请求时也会带上发回给服务端。使用原生操作 cooike 是非常麻烦的，借助 cookie-universal-nuxt 模块（该模块只是帮助我们注入，主要实现依赖 cookie-universal），我们能够更方便的使用 cookie。不管在服务端还是客户端，cookie-universal-nuxt 都为我们提供一致的 api，它内部会帮我们去适配对应的方法。

安装

安装 cookie-universal-nuxt

npm i cookie-universal-nuxt --save

nuxt.config.js：

module.exports = {
  modules: ["cookie-universal-nuxt"],
};

基础使用

同样的， cookie-universal-nuxt 会同时注入，访问 $cookies 进行使用。

服务端：

// 获取
app.$cookies.get("name");
// 设置
app.$cookies.set("name", "value");
// 删除
app.$cookies.remove("name");

客户端：

// 获取
this.$cookies.get("name");
// 设置
this.$cookies.set("name", "value");
// 删除
this.$cookies.remove("name");

更多使用方法戳这里 https://www.npmjs.com/package/cookie-universal-nuxt (opens new window)

实际应用流程

像掘金的登录，我们在登录后验证信息会被长期存储起来，而不是每次使用都要进行登录。但 cookie 生命周期只存在于浏览器，当浏览器关闭后也会随之销毁，所以我们需要为其设置一个较长的过期时间。

在项目中我将设置身份信息封装成工具方法，在登录成功后会调用此方法：

/utils/utils.js :

setAuthInfo(ctx, res) {
  let $cookies, $store
  // 客户端
  if (process.client) {
    $cookies = ctx.$cookies
    $store = ctx.$store
  }
  // 服务端
  if (process.server) {
    $cookies = ctx.app.$cookies
    $store = ctx.store
  }
  if ($cookies && $store) {
    // 过期时长 new Date(Date.now() + 8.64e7 * 365 * 10)
    const expires = $store.state.auth.cookieMaxExpires
    // 设置cookie
    $cookies.set('userId', res.userId, { expires })
    $cookies.set('clientId', res.clientId, { expires })
    $cookies.set('token', res.token, { expires })
    $cookies.set('userInfo', res.user, { expires })
    // 设置vuex
    $store.commit('auth/UPDATE_USERINFO', res.user)
    $store.commit('auth/UPDATE_CLIENTID', res.clientId)
    $store.commit('auth/UPDATE_TOKEN', res.token)
    $store.commit('auth/UPDATE_USERID', res.userId)
  }
}

之后需要改造下 axios，让它在请求时带上验证信息：

/plugins/axios.js :

export default function ({ app: { $axios, $cookies } }) {
  $axios.defaults.baseURL = process.env.baseUrl;
  $axios.defaults.timeout = 30000;
  $axios.interceptors.request.use((config) => {
    // 头部带上验证信息
    config.headers["X-Token"] = $cookies.get("token") || "";
    config.headers["X-Device-Id"] = $cookies.get("clientId") || "";
    config.headers["X-Uid"] = $cookies.get("userId") || "";
    return config;
  });
  $axios.interceptors.response.use((response) => {
    if (/^[4|5]/.test(response.status)) {
      return Promise.reject(response.statusText);
    }
    return response.data;
  });
}

内容截取至：https://www.cnblogs.com/chanwahfung/p/12899714.html (opens new window)