Nuxt服務端使用Axios調用接口時傳遞cookies

我的博客 地址:http://www.wenhaofan.com/article/20190321183709

介紹

    在作單點登陸時，後端須要根據cookie獲取登陸用戶，因爲前端項目使用了Nuxt作SSR，因此前端項目服務端使用Axios發送的接口請求中沒有攜帶瀏覽器的cookie，這樣後端項目獲取不到cookie就一直處於未登陸的狀態,因此須要在Axios請求中設置請求頭內容，添加瀏覽器端傳來的cookie值，這裏使用Nuxt插件的方法封裝Axios，簡化操做流程

建立插件

   1.在plugins目錄下新建axios-plugin.js

   2.添加以下代碼

    import axios from 'axios'

//開啓瀏覽器端cookie傳遞
axios.defaults.withCredentials=true

const EDU_SERVER_API='http://127.0.0.1/api/v2';

let options = {};
options.baseURL = EDU_SERVER_API

let ax = {
  options:options,
  get: (req,url) => {
    options.headers = {
      "Cookie": req.headers.cookie+";"
    }
    url=options.baseURL+url;
    return axios.get(url,options);
  }
}

// 爲了在 asyncData 方法中使用
export default ({ app }, inject) => {
  // Set the function directly on the context.app object
  app.$global = {
    ax:ax
  }
};

    3.在Nuxt.config.js中新增plugins，新增後以下

  plugins: [
    '@/plugins/global',
    {
      src:'@/plugins/element-ui',
      ssr: true,
    },
    '@/plugins/axios-plugin'
  ],

AsyncData中使用

       代碼以下

export default {
    async asyncData(params) {
      return params.app.$global.ax.get(params.req, '/user/').then(res => {
        return {user: res.data.user};
      })
    }
}