Nuxt使用爬坑之设置header

年前公司因为换技术栈，前端组开始使用vue+Nuxt+express+ES6+sass来重构我们的wap站，因为之前我们用的是传统的html+php前后端混合开发。所以这次技术跨域度很大，对我们来说很具有挑战性。

在使用Nuxt中最先遇到的一个难题就是设置header，框架中需要设置一些全局变量在header中，如cityid，access_token等而且这些值都是从客户端的cookie中获取的。这个问题困扰了我两天，期间各种搜索，论坛，官方文档，也没找到答案，nuxt出来的时间不久，相关解决方案网上都比较少，因为看到好些人问这个，所以我打算把它写出来供和我一样的新手参考，避免再重走弯路。技术有限若，错误之处还望指正。

我们在使用用Nuxt的时候最困惑的就是，那些代码实在服务端执行，那些代码是在客户端。因为需要seo的内容是需要在服务端渲染的，而有些下拉加载的，分页的内容是需要客户端加载的。后来靠一步步调试慢慢摸清了个大概。

我们请求是用的axios,查询官方文档后发现axios中是可以通过axios.defaults.headers设置header的。

如是在axios实例文件中做了如下设置

//axios.js
import  axios from 'axios' //引入axios模块
import { getCookie } from '~/plugins/cookies' //自己封装的获取cookie的模块
let options = {
    baseURL:'www.XXX.com'
}
options.headers = {
    'access_tocken':(getCookie('jhu'),
    'cityid':getCookie('cityid') ,
}
axios.create(options)

然鹅，结果却是页面报错了,因为在服务端node环境中document，window是不存在的所以不能通过document.cookie来获取cookie,那么只能让这段js只能在客户端执行了

if(!process.server){//当不是服务端的时候获取cookie设置header
    options.headers = {
    'access_tocken':(getCookie('jhu'),
    'cityid':getCookie('cityid') ,
    }
}

那么这么设置客户端发的请求是设置成功了，那服务端呢？后来在一个nuxt的论坛上，一个以色列的友人提示用中间件来解决，后来在公司大佬的帮助下，设置成功了。在中间件中可以在直接在参数req的header属性下获取cookie。获取到了值我们就可以设置了

首先在nuxt.config.js文件内设置使用中间件

//nuxt.config.js
module.exports={
    ...
    router:{
        middleware:'headers'
    }
    ...
}

middleware下创建一个header.js文件

//header.js
import  axios from 'axios'
export default function({req,res}) {
let cookieArr = req.headers.cookie.split(';');
//获取cookie然后拆成键值对
...
//设置axios的全局变量
axios.defaults.headers['access_token'] =access_token ;
axios.defaults.headers['cityid'] = cityid
}

这样服务端的header就可以设置成功啦，不过这里遇到过一个坑，就是access_token值中带有“=”号，导致拆分的时候拆出的值不对，这里需要在拆分前encodeURIComponent一下，拆完了再decodeURIComponent还原。

那么这么是不是就大功告成了呢？

然鹅，在我们后面的测试中发现，客户端在页面加载时的请求是有了，但是如果在页面中动态修改了cookie值，header中的值是没有更新的，如是在axios的拦截器中又设置了一次，

//axios.js
import  axios from 'axios' //引入axios模块
import { getCookie } from '~/plugins/cookies' //自己封装的获取cookie的模块
let options = {
    baseURL:'www.XXX.com'
}
options.headers = {
    'access_tocken':(getCookie('jhu'),
    'cityid':getCookie('cityid') ,
}
let newAxios = axios.create(options)
newAxios.interceptors.request.use(function (config) {
    if(!process.server){
        config.headers['Authorization'] =(getCookie('jhu')
        config.headers['city-id'] =getCookie('city-id')
    }
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

那么到此为止才算正真的完成啦。

总结：通过这次的实践我们发现，nuxt中js执行是需要区分客户端还是服务端的，这个很重要，我们在上面吃过很多亏，比如很多未定义，页面报错是因为在数据在客户单定义的，在服务端提前使用引起的

ps:刚开始用的时候还不会，埋了很多雷，后来才发现可以用官方推进的nuxt axios 模块来实现，自己写会有很多坑，比如:axios.defaults.headers['xxx'] 这个是全局的，store也是全局的。有的地方是只会在服务端执行，比如，nuxtServerInit,有的地方是客户端和服务端都会走的，比如：middleware。需要慢慢深入理解。可参考nuxt的生命周期https://blog.csdn.net/webjhh/article/details/94460595。
@nuxtjs/axios:https://axios.nuxtjs.org/

Nuxt使用爬坑之设置header

推荐阅读更多精彩内容