Vue中請求數據時,常常需要保存用戶的登錄狀態,以及一些用戶自定義的信息。這時候我們就需要使用cookie了。
Cookie是存儲在用戶瀏覽器中的小數據片段,用于存儲用戶的狀態和信息。Vue中,我們可以使用第三方庫vue-cookie來操作cookie。
npm install vue-cookie --save
安裝完成后,在Vue項目中的入口文件中引入vue-cookie,并通過Vue.use()方法將其添加為Vue的插件。
import Vue from 'vue' import VueCookie from 'vue-cookie' Vue.use(VueCookie)
接著,我們可以在組件中使用$cookie訪問和設置cookie。
export default { data() { return { userInfo: this.$cookie.get('userInfo') || {} } }, mounted() { this.$cookie.set('userInfo', { username: '張三', age: 18 }, 1) // 存儲1天 } }
上面的代碼中,我們首先通過$cookie.get()方法獲取cookie中的信息,如果沒有則返回一個空對象。接著,在mounted鉤子函數中使用$cookie.set()方法設置cookie,存儲時間為1天。
假設我們需要向服務器發送請求時,需要在請求頭中添加cookie,則可以在Vue的Axios攔截器中設置請求頭。
import axios from 'axios' import { getToken } from 'common/js/auth' axios.interceptors.request.use( config =>{ if (getToken()) { config.headers['Cookie'] = getToken() } return config }, error =>{ return Promise.reject(error) } )
上面的代碼中,我們在請求頭中添加了Cookie字段,其值為getToken()返回的cookie。
總體來說,Vue中使用cookie進行請求時,需要先安裝和初始化vue-cookie,然后在組件中通過$cookie訪問和設置cookie,在Axios攔截器中設置請求頭即可。