Nuxt服务端使用Axios调用接口时传递cookies
- 前端
- Stella981
- 0
个人博客 地址: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};
})
}
}
免责申明：本站发布的内容（图片、视频和文字）以转载和分享为主，文章观点不代表本站立场，如涉及侵权请联系站长邮箱：xbc-online@qq.com进行反馈，一经查实，将立刻删除涉嫌侵权内容。
