解决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 09 Javascript
Javascript 模式实例 观察者模式
Oct 24 Javascript
Javascript 中文字符串处理额外注意事项
Nov 15 Javascript
JavaScript 语言的递归编程
May 18 Javascript
jquery如何判断某元素是否具备指定的样式
Nov 05 Javascript
js计算任意值之间随机数的方法
Jan 16 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
node.js学习之事件模块Events的使用示例
Sep 28 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 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结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
php实现微信公众号无限群发
2015/10/11 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
Javascript 之封装(Package)
2018/09/14 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
[34:10]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
Python zip函数打包元素实例解析
2019/12/11 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
python判断正负数方式
2020/06/03 Python
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
梅西百货官网:Macy’s
2020/08/04 全球购物
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
西式婚礼证婚词
2014/01/12 职场文书
一年级家长会邀请函
2014/01/25 职场文书
初一体育教学反思
2014/01/29 职场文书
2014年度个人工作总结
2014/11/07 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
办公经费申请报告
2015/05/15 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python
windows系统安装配置nginx环境
2022/06/28 Servers
Python中tqdm的使用和例子
2022/09/23 Python