nuxt在客户端动态引入cookie并使用、服务端动态引入cookieparser【cookie服务端和客户端共享数据】

1.客户端组件使用 

下载依赖 cnpm i js-cookie

<script>
import { login } from "@/api/user";
// js-cookie是一个客户端模块，服务端不需要，所以需要动态加载
// process.client是Nux中特殊提供的一个API，用域判断代码的执行环境
const Cookie = process.client ? require("js-cookie") : undefined;

export default {
  name: "loginPage",
  components: {},
  props: {},
  data() {
    return {
      user: {
        email: "",
        password: "",
      },
      errors: {},
    };
  },
  watch: {},
  computed: {},
  methods: {
    async onLogin() {
      // 获取表单数据
      const user = this.user;
      try {
        // 表单验证
        const { data } = await login({ user });
        console.log("注册成功", data);
        this.errors = {};

        // 将用户信息存储到Vuex容器中
        this.$store.commit("setUser", data.user);
        // 防止页面刷新数据调式，所以存储到cookie中
        Cookie.set('user',data.user)
        // 注册成功
        this.$router.push("/");
      } catch (err) {
        console.log("注册失败", err);
        this.errors = err.response.data.errors;
      }

      // 请求提交
    },
  },
  created() {},
  mounted() {},
};
</script>

2.服务端，store中使用

下载依赖 cnpm i cookieparser

// 只有在服务端才加载安装
const cookieparser = process.server ? require('cookieparser') : undefined

// 容器的状态
export const state = () => {
  return {
    //   用户状态
    // 之前：将token持久化到本地存储
    user: null
    // user: JSON.parse(window.localStorage.getItem('user'))
  }
}

// 容器的mutation
export const mutations = {
  setUser (state, user) {
    state.user = user
    // 之前：将token持久化到本地存储
    // window.localStorage.setItem('user',JSON.stringify(user))
  }

}
export const actions = {
  // nuxtServerInit方法会在服务端渲染被执行
  // cookie数据格式：key=value;key=value字符串
  nuxtServerInit ({ commit }, { req }) {
    let user = null
    // 如果请求头中有cookie数据
    if (req.headers.cookie) {
      // cookieparser.parse：就是把cookie格式字符串转化为一个对象
      // {key:value,key:value}
      const parsed = cookieparser.parse(req.headers.cookie)
      try {
        // 将Cookie中user的值转为JavaScript对象
        user = JSON.parse(parsed.user)
      } catch (err) {
        // No valid cookie found
      }
    }
    commit('setUser', user)
  }
}