解决vue项目axios每次请求session不一致的问题


Posted in Javascript onOctober 24, 2020

1、vue开发后台管理项目,登录后,请求数据每次session都不一致,后台返回未登录,处理方法打开main.js设置:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
require('es6-promise').polyfill()
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import store from './store'
import axios from 'axios' // 1、在这里引入axios 
 
axios.interceptors.response.use(function(res) {
 var res = res.data;
 if(res.status === 403 ) {
 router.push('/')
 return res;
 }
 return res;
}, function(error) {
 return Promise.reject(error);
});
axios.defaults.withCredentials = true; //意思是携带cookie信息,保持session的一致性
Vue.prototype.$axios = axios
Vue.prototype.stringify = require('qs').stringify; 
 
Vue.use(MintUI)
Vue.use(ElementUI);
Vue.config.productionTip = false
 
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 store,
 components: { App },
 template: '<App/>'
})

withCredentials为false意思是不携带cookie信息,为保持session的一致性需设置为true;

2、为解决跨域,需要代理

解决vue项目axios每次请求session不一致的问题

3、数据请求

解决vue项目axios每次请求session不一致的问题

补充知识:解决跨域造成Vue-element每次请求sessionID不同问题

vue-element作为前端开发框架, 前后端分离项目ajax跨域, 每次http请求后sessionId均会发生变化,导致获取session失败,

只需要在文件vue-element-admin-master-1\src\utils\request.js中添加如下代码即可:

withCredentials: true,

crossDomain: true

整个axios请求为:

const service = axios.create({
 baseURL: process.env.BASE_API, // api的base_url
 timeout: 5000, // request timeout
 withCredentials: true,
 crossDomain: true
})

以上这篇解决vue项目axios每次请求session不一致的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 学习笔记 防止发生命名冲突
Jul 30 Javascript
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
Apr 01 Javascript
JavaScript中__proto__与prototype的关系深入理解
Dec 04 Javascript
jquery结婚电子请柬特效源码分享
Aug 21 Javascript
BootStrapValidator初使用教程详解
Feb 10 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
vue打包的时候自动将px转成rem的操作方法
Jun 20 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
Vue在页面数据渲染完成之后的调用方法
Sep 11 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
Jan 05 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 #Javascript
vue中是怎样监听数组变化的
Oct 24 #Javascript
JSON stringify方法原理及实例解析
Oct 23 #Javascript
vue中使用腾讯云Im的示例
Oct 23 #Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 #Javascript
vue使用video插件vue-video-player详解
Oct 23 #Javascript
vue-video-player视频播放器使用配置详解
Oct 23 #Javascript
You might like
php5中类的学习
2008/03/28 PHP
php中的三元运算符使用说明
2011/07/03 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
纯css+js写的一个简单的tab标签页带样式
2014/01/28 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
jQuery滚动条插件nanoscroller使用指南
2015/04/21 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
python中list列表的高级函数
2016/05/17 Python
Python中基础的socket编程实战攻略
2016/06/01 Python
在python的类中动态添加属性与生成对象
2016/09/17 Python
windows 下python+numpy安装实用教程
2017/12/23 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
python-地图可视化组件folium的操作
2020/12/14 Python
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
MySQL七种JOIN类型小结
2021/10/24 MySQL