nuxt 解决cookie

解决 Cookie 问题

安装 `@nuxtjs/axios` 和 `@nuxtjs/proxy` 模块

"dependencies": {
  "@nuxtjs/axios": "^5.3.6",
},
"devDependencies": {
  "@nuxtjs/proxy": "^1.3.3",
}

配置 axios 和 proxy

/*
 ** Nuxt.js modules
 */
modules: [
  // Doc: https://axios.nuxtjs.org/usage
  '@nuxtjs/axios',
  '@nuxtjs/proxy'
],
/*
 ** Axios module configuration
 */
axios: {
  // See https://github.com/nuxt-community/axios-module#options
  proxy: true,
},

proxy: {
 '/api/': 'http://dev.rongyipiao.com/'
},

baseURL 和 proxy 不能同时工作(在开启了 proxy 后，baseURL就无效了)，这个时候可以使用 prefix 来替代 baseURL。

问题: 在测试中使用了 prefix 后，代理正常，但是无法使用 cookie，所以采用的是直接在 proxy 中写完整的服务器 url.

使用 cookie

由于Nuxt.js同时提供服务器和客户端呈现，并且浏览器的cookie与Node.js服务器的cookie不同，因此我们应该将令牌(token)数据推送到可以在两端访问的某个存储空间中。

安装依赖项：

npm install js-cookie --save
npm install cookieparser --save

解析 cookie

nuxtServerInit 函数仅在每个服务器渲染中运行。因此我们使用 store 来改变浏览器中 cookie 的值。我们可以使用 req.headers.cookie 来获取浏览器端的 cookie , 并使用 cookie-parser 来解析它:

actions: {
  nuxtServerInit({ commit }, { req }) {
    let auth = null;
    if (req.headers.cookie) {
      const parsed = cookieparser.parse(req.headers.cookie);
    }
  }
}

参考：