解決vue項目axios每次請求session不一致的問題
1、vue開發(fā)后臺管理項目,登錄后,請求數(shù)據(jù)每次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、為解決跨域,需要代理

3、數(shù)據(jù)請求

補充知識:解決跨域造成Vue-element每次請求sessionID不同問題
vue-element作為前端開發(fā)框架, 前后端分離項目ajax跨域, 每次http請求后sessionId均會發(fā)生變化,導致獲取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不一致的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue中render函數(shù)調用時機與執(zhí)行細節(jié)源碼分析
這篇文章主要為大家介紹了Vue中render函數(shù)調用時機與執(zhí)行細節(jié)源碼分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-10-10
vue2 el-table行懸停時彈出提示信息el-popover的實現(xiàn)
本文主要介紹了vue2 el-table行懸停時彈出提示信息el-popover的實現(xiàn),用到了cell-mouse-enter、cell-mouse-leave兩個事件,具有一定的參考價值,感興趣的可以了解一下2024-01-01
一文帶你搞懂Vue中Provide/Inject的使用與高級應用
這篇文章將詳細介紹如何在?Vue.js?中使用?provide?和?inject?模式,并探討其在實際應用中的高級用法,感興趣的小伙伴可以跟隨小編一起學習一下2024-11-11
Vue2 Element Schema Form 配置式生成表單的實現(xiàn)
本文主要介紹了Vue2 Element Schema Form 配置式生成表單的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-05-05
手把手搭建安裝基于windows的Vue.js運行環(huán)境
手把手教大家搭建安裝基于windows的Vue.js的運行環(huán)境,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06

