zoukankan      html  css  js  c++  java
  • 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};
          })
        }
    }

        


  • 相关阅读:
    C语言基础
    R安装包
    随笔
    计算机组成原理(三)--存储器的层次结构
    计算机组成原理(一)
    查找
    二叉树
    Mesos
    第三章 线性表
    第四章 栈与队列
  • 原文地址:https://www.cnblogs.com/fanwenhao/p/10573641.html
Copyright © 2011-2022 走看看