解决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计算页面执行时间的函数
Dec 07 Javascript
javascript中window.event事件用法详解
Dec 11 Javascript
学习js在线html(富文本,所见即所得)编辑器
Dec 18 Javascript
js清理Word格式示例代码
Feb 13 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
利用javascript如何随机生成一定位数的密码
Sep 22 Javascript
nginx+vue.js实现前后端分离的示例代码
Feb 12 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 Javascript
详解Js模块化的作用原理和方案
Apr 29 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
php checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
简单介绍win7下搭建apache+php+mysql开发环境
2015/08/06 PHP
PHP中的Iterator迭代对象属性详解
2019/04/12 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
枚举JavaScript对象的函数
2006/12/22 Javascript
Opacity.js
2007/01/22 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
非常漂亮的相册集 使用jquery制作相册集
2016/04/28 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
2019/10/11 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
vue大型项目之分模块运行/打包的实现
2020/09/21 Javascript
在python plt图表中文字大小调节的方法
2019/07/08 Python
python3 求约数的实例
2019/12/05 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
基于Python快速处理PDF表格数据
2020/06/03 Python
全球性的在线购物网站:Zapals
2017/03/22 全球购物
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
美国翻新电子产品商店:The Store
2019/10/08 全球购物
十一个高级MySql面试题
2014/10/06 面试题
乒乓球兴趣小组活动总结
2014/07/08 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书
聊聊Python String型列表求最值的问题
2022/01/18 Python
python中的getter与setter你了解吗
2022/03/24 Python
TS 类型收窄教程示例详解
2022/09/23 Javascript