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)