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.添加如下代码

1    import axios from 'axios'
2
3//开启浏览器端cookie传递
4axios.defaults.withCredentials=true
5
6const EDU_SERVER_API='http://127.0.0.1/api/v2';
7
8let options = {};
9options.baseURL = EDU_SERVER_API
10
11let ax = {
12  options:options,
13  get: (req,url) => {
14    options.headers = {
15      "Cookie": req.headers.cookie+";"
16    }
17    url=options.baseURL+url;
18    return axios.get(url,options);
19  }
20}
21
22// 为了在 asyncData 方法中使用
23export default ({ app }, inject) => {
24  // Set the function directly on the context.app object
25  app.$global = {
26    ax:ax
27  }
28};

    3.在Nuxt.config.js中新增plugins，新增后如下

1  plugins: [
2    '@/plugins/global',
3    {
4      src:'@/plugins/element-ui',
5      ssr: true,
6    },
7    '@/plugins/axios-plugin'
8  ],

AsyncData中使用

       代码如下

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