解决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 相关文章推荐
juqery 学习之六 CSS--css、位置、宽高
Feb 11 Javascript
jQuery 源码分析笔记(5) jQuery.support
Jun 19 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
基于node.js实现微信支付退款功能
Dec 19 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 Javascript
vue组件name的作用小结
May 23 Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 Javascript
详解vue-router的导航钩子(导航守卫)
Nov 02 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
文件上传的实现
2006/10/09 PHP
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
PHP Session机制简介及用法
2014/08/19 PHP
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
jquery将一个表单序列化为一个对象的方法
2014/01/03 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
使用Vue写一个datepicker的示例
2018/01/27 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
python如何为被装饰的函数保留元数据
2018/03/21 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
python八皇后问题的解决方法
2018/09/27 Python
flask 实现token机制的示例代码
2019/11/07 Python
Python中如何引入第三方模块
2020/05/27 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
python多线程爬取西刺代理的示例代码
2021/01/30 Python
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
中学生打架检讨书
2014/02/10 职场文书
开学第一周总结
2015/07/16 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS
探究Mysql模糊查询是否区分大小写
2021/06/11 MySQL
SQL实现LeetCode(178.分数排行)
2021/08/04 MySQL
利用Python实现模拟登录知乎
2022/05/25 Python