解决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 相关文章推荐
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
Jun 17 Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
如何获取TypeScript的声明文件.d.ts
May 01 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
jQuery表单选择器用法详解
Aug 22 jQuery
简单了解vue中的v-if和v-show的区别
Oct 08 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
Oct 22 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
Jul 17 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中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
javascript function、指针及内置对象
2009/02/19 Javascript
jQuery 加上最后自己的验证
2009/11/04 Javascript
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
javascript完美拖拽的实现方法
2013/09/29 Javascript
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
2015/03/02 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
JavaScript初学者必看“new”
2017/06/12 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
Python获取当前路径实现代码
2017/05/08 Python
python dumps和loads区别详解
2020/02/04 Python
帕克纽约:PARKER NY
2018/12/09 全球购物
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
一套带网友答案的.NET笔试题
2016/12/06 面试题
交通事故协议书范文
2014/04/16 职场文书
书香家庭事迹材料
2014/05/09 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
区长工作作风个人整改措施
2014/10/01 职场文书
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
Python基础之函数嵌套知识总结
2021/05/23 Python
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL