解决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 相关文章推荐
javascript两段代码,两个小技巧
Feb 04 Javascript
jQuery 处理网页内容的实现代码
Feb 15 Javascript
工作中常用到的JS表单验证代码(包括例子)
Nov 11 Javascript
jQuery事件 delegate()使用方法介绍
Oct 30 Javascript
js 显示base64编码的二进制流网页图片
Apr 04 Javascript
javascript中使用正则计算中文长度的例子
Apr 29 Javascript
jQuery基于ajax实现星星评论代码
Aug 07 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 Javascript
npm全局环境变量配置详解
Dec 15 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中的字符串函数
2006/10/09 PHP
php access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
简单实用的PHP文本缓存类实例
2019/03/22 PHP
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
Python性能优化技巧
2015/03/09 Python
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
Python使用字典实现的简单记事本功能示例
2019/08/15 Python
Python list运算操作代码实例解析
2020/01/20 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
python中scrapy处理项目数据的实例分析
2020/11/22 Python
Django多个app urls配置代码实例
2020/11/26 Python
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
劳资员岗位职责
2013/11/11 职场文书
客服专员岗位职责范本
2013/11/29 职场文书
高中体育教学反思
2014/01/24 职场文书
揭牌仪式主持词
2014/03/19 职场文书
对照检查剖析材料
2014/09/30 职场文书
护士心得体会范文
2016/01/25 职场文书