解决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 的Document属性和方法集合
Jan 25 Javascript
js 键盘记录实现(兼容FireFox和IE)
Feb 07 Javascript
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
Mar 26 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 Javascript
JS与SQL方式随机生成高强度密码示例
Dec 29 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
JavaScript实现的拼图算法分析
Feb 13 Javascript
Vue调用后端java接口的实例代码
Oct 28 Javascript
原生小程序封装跑马灯效果
Oct 21 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
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
php命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
学习YUI.Ext第五日--做拖放Darg&amp;Drop
2007/03/10 Javascript
Javascript 函数对象的多重身份
2009/06/28 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
详解jquery uploadify 上传文件
2013/11/09 Javascript
jQuery中bind与live的用法及区别小结
2014/01/27 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
基于js实现投票的实例代码
2015/08/04 Javascript
AngularJs表单验证实例代码解析
2016/11/29 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
微信小程序通过一个json实现分享朋友圈图片
2019/09/03 Javascript
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
Python中的列表生成式与生成器学习教程
2016/03/13 Python
Python实现的rsa加密算法详解
2018/01/24 Python
更新修改后的Python模块方法
2019/03/03 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
美国在线印刷公司:PsPrint
2017/10/12 全球购物
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
司马光教学反思
2014/02/01 职场文书
房屋买卖协议书范本
2014/04/10 职场文书
2014高考励志标语
2014/06/05 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
学校党支部承诺书
2015/04/30 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书
纪检干部学习心得体会
2016/01/23 职场文书
创业计划书之家政服务
2019/09/18 职场文书