Nuxt使用cookies踩坑之设置axios的header

墨蓝 2022-01-19 06:05 1293阅读 0赞

情景介绍：公司中有一个类似单点登录的项目，主系统中有登录后username和token，存放在浏览器的cookies中，现在改造的子系统需要拿到这两个cookie值，再通过axios的设置header头部信息去向后端请求数据，由于使用了asyncData和nuxtServerInit方法，所以在服务端一开始就需要这两个数据，但是又拿不到客户端的cookie，查了很多资料

解决方案1 如下：这里使用Nuxt插件的方法封装Axios

步骤一：在plugins目录下新建axios-plugin.js

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
    
    }
    
    };
    复制代码

步骤二 在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};
    
          })
    
        }
    
    }
    复制代码

解决方案2

介绍：使用中间件

1. 通过 express 取得 cookies
    
    在 server.js 上引入 cookies 解析中间件
    
    constcookieParser =require('cookie-parser')
    
    并且在路由前面 use
    
    app.use(cookieParser())
    
    2. 将 cookies 注入 render 的上下文中
    
    app.get('*', (req, res) => {// 其他代码省略constcontext = {url: req.url,cookies: req.cookies    }constrenderStream = renderer.renderToStream(context)// 其他代码省略})
    
    3. 将 cookies 注入 vuex 的 store 中
    
    在server-entry.js文件中, 将 cookies 注入到 store 中
    
    exportdefaultcontext => {// 其他代码省略if(context.cookies) {        store.state.cookies = context.cookies    }// 其他代码省略}
    
    这样就可以在组件中取到 cookies 了.
    
    4. 封装请求
    
    这里以 axios 为例, 将 cookies 加载封装函数的参数中:
    
    注意: 这里的封装, 建议将浏览器用的和 node 用的分开
    
    importaxiosfrom'axios'constparseCookie =cookies=>{letcookie =''Object.keys(cookies).forEach(item=>{        cookie+= item +'='+ cookies[item] +'; '})returncookie}exportdefault{    get(url, params, cookies = {}) {constcookie = parseCookie(cookies)returnaxios({method:'get',            url,            params,headers: {'X-Requested-With':'XMLHttpRequest',                cookie            }        })    }}
    
    5. 发起带 cookies 参数的请求
    
    在组件中 dispatch vuex 的 actions:
    
    constfetchInitialData =async(store, config = {page:1}) => {awaitstore.dispatch('frontend/article/getList', config)}exportdefault{name:'frontend-index',prefetch: fetchInitialData,// 其他代码省略}
    
    在 vuex 的 actions 中, 从 store 里读取 cookies, 作为参数传给请求接口的函数
    
    async['getList']({commit,rootState: {cookies}}, config) {const{data: { data, code} } =awaitapi.get('/api/article/list', config, cookies)// 其他代码省略}
    
    6. 几个注意点
    
    1, cookies的内容中不允许带中文, 不知道从什么版本开始, http-server 的 header 里有中文就直接报错
    
    2,import store from '../store'这种方式下的 store 是不会带 cookies 的
    复制代码

解决方案3（我使用的方案）

middleware下创建axiosMiddle.js

import axios from 'axios'
    
    import md5 from 'js-md5'
    
    import cookies from 'js-cookie'
    
    export default function({req,res}) {
    
     if (req.headers !== undefined) {
    
        let cookieArr = req.headers.cookie;
    
        //获取cookie然后拆成键值对
    
        const getUserName = getCookie('name', cookieArr)
    
        const getToken = getCookie('tiken', cookieArr)
    
        //设置axios的全局变量.
    
        axios.defaults.timeout = 60000 // 响应时间
    
        // @requestParams
    
        axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
    
        axios.defaults.headers.username = getUserName
    
        axios.defaults.headers.token = getToken
    
        axios.defaults.withCredentials = true
    
      }
    
    }
    
    //解析浏览器中的cookies
    
    function getCookie (name, strCookie) {
    
      console.log('strCookie',strCookie)
    
      var arrCookie = strCookie.split(';')
    
      for (var i = 0; i < arrCookie.length; i++) {
    
        var arr = arrCookie[i].split('=')
    
        if (arr[0].trim() === name) {
    
          return arr[1]
    
        }
    
      }
    
      return {}
    
    }
    复制代码

在nuxt.config,js中设置下使用中间件即可

router: {
    
        middleware:'axiosMiddle'
    
      },
    复制代码

至此，结束

转载于:https://juejin.im/post/5cb18b08f265da035b618899