在Vue開發中,我們經常需要與后端接口進行交互,而為了保持用戶登陸狀態,我們往往需要使用SessionID。那么在Vue中如何使用axios來設置和攜帶SessionID呢?讓我們來一起探討。
首先,在發送請求之前,我們需要先設置axios的一些默認值,來確保每次請求都會攜帶SessionID。這可以通過axios的interceptors實現:
axios.interceptors.request.use(function (config) { config.withCredentials = true; //攜帶cookie config.headers.common['SessionID'] = window.localStorage.getItem('SessionID') || ''; //攜帶SessionID return config; }, function (error) { return Promise.reject(error); });
這段代碼的作用是,在每次請求時自動攜帶前端存儲的SessionID,保持用戶登陸狀態。其中,config.withCredentials = true; 是為了攜帶cookie,需要與后端設置Access-Control-Allow-Origin的值為*或指定前端的域名,否則無法攜帶cookie數據。
另外,我們可以將SessionID保存到本地存儲中,方便在下一次使用時調用。如下:
axios.post('/login', data) .then(function (response) { window.localStorage.setItem('SessionID', response.headers.sessionid); //將返回的SessionID存儲到本地 }) .catch(function (error) { console.log(error); });
這段代碼是在登陸成功后將服務器返回的SessionID存儲到本地,以便下次使用。需要注意的是,在設置SessionID時,后端需要在響應頭中添加'Access-Control-Expose-Headers': 'SessionID',否則axios將無法獲取到返回的SessionID。
綜上所述,使用axios來設置和攜帶SessionID非常簡單,只需要在每次請求前設置axios的默認值,并將SessionID存儲到本地,即可輕松實現保持用戶登陸狀態的功能。