解決vue項(xiàng)目axios每次請(qǐng)求session不一致的問題
1、vue開發(fā)后臺(tái)管理項(xiàng)目，登錄后，請(qǐng)求數(shù)據(jù)每次session都不一致，后臺(tái)返回未登錄，處理方法打開main.js設(shè)置：
// 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的一致性需設(shè)置為true；
2、為解決跨域，需要代理
3、數(shù)據(jù)請(qǐng)求
補(bǔ)充知識(shí)：解決跨域造成Vue-element每次請(qǐng)求sessionID不同問題
vue-element作為前端開發(fā)框架, 前后端分離項(xiàng)目ajax跨域, 每次http請(qǐng)求后sessionId均會(huì)發(fā)生變化,導(dǎo)致獲取session失敗,
只需要在文件vue-element-admin-master-1\src\utils\request.js中添加如下代碼即可：
withCredentials: true,
crossDomain: true
整個(gè)axios請(qǐng)求為:
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 5000, // request timeout
withCredentials: true,
crossDomain: true
})
以上這篇解決vue項(xiàng)目axios每次請(qǐng)求session不一致的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js第三天學(xué)習(xí)筆記（計(jì)算屬性computed）
這篇文章主要為大家詳細(xì)介紹了Vue.js第三天的學(xué)習(xí)筆記，vue.js計(jì)算屬性computed,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
前端通過vue調(diào)用后端接口導(dǎo)出excel表格基本步驟
在Vue前端項(xiàng)目中,可通過axios庫發(fā)送請(qǐng)求至后端獲取Excel下載鏈接,文中通過代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-10-10
Vue中render函數(shù)調(diào)用時(shí)機(jī)與執(zhí)行細(xì)節(jié)源碼分析
這篇文章主要為大家介紹了Vue中render函數(shù)調(diào)用時(shí)機(jī)與執(zhí)行細(xì)節(jié)源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
Nvue是一個(gè)基于weex改進(jìn)的原生渲染引擎,它在某些方面要比vue更高性能,在app上使用更加流暢,這篇文章主要介紹了nvue頁面用法uniapp,需要的朋友可以參考下2023-12-12
在后臺(tái)使用過程中經(jīng)常會(huì)因?yàn)榘粹o重復(fù)點(diǎn)擊,而造成發(fā)送多次重復(fù)請(qǐng)求 以下方法可以避免這種情況,下面這篇文章主要給大家介紹了關(guān)于vue中如何防止用戶頻繁點(diǎn)擊按鈕的相關(guān)資料,需要的朋友可以參考下2022-09-09
vue2 el-table行懸停時(shí)彈出提示信息el-popover的實(shí)現(xiàn)
本文主要介紹了vue2 el-table行懸停時(shí)彈出提示信息el-popover的實(shí)現(xiàn),用到了cell-mouse-enter、cell-mouse-leave兩個(gè)事件,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
一文帶你搞懂Vue中Provide/Inject的使用與高級(jí)應(yīng)用
這篇文章將詳細(xì)介紹如何在?Vue.js?中使用?provide?和?inject?模式,并探討其在實(shí)際應(yīng)用中的高級(jí)用法,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
Vue2 Element Schema Form 配置式生成表單的實(shí)現(xiàn)
本文主要介紹了Vue2 Element Schema Form 配置式生成表單的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
vue 使用moment獲取當(dāng)前時(shí)間及一月前的時(shí)間
開發(fā)中會(huì)有要獲取當(dāng)前日期的需求,有的是獲取到當(dāng)前月份,本文就介紹了vue獲取當(dāng)前日期時(shí)間(moment、new?Date()),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2023-08-08
手把手搭建安裝基于windows的Vue.js運(yùn)行環(huán)境
手把手教大家搭建安裝基于windows的Vue.js的運(yùn)行環(huán)境，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06