Axios是一個基于Promise的HTTP庫,可以在瀏覽器和Node.js中將表現和API請求分離。Vue與Axios的結合可以更方便地處理HTTP請求。另外,Axios還提供了添加token的功能,以實現REST API的認證,下面一步步詳細介紹如何在Vue中使用Axios添加token。
首先,我們需要在Vue項目中安裝Axios:
npm install axios --save
然后在Vue項目中引入Axios:
import axios from 'axios'
接著,我們可以在Vue組件的方法中使用Axios發送請求,例如:
axios.get('/api/users') .then(response =>{ console.log(response.data) }) .catch(error =>{ console.log(error) })
以上代碼會向'/api/users'發送GET請求,并在控制臺輸出響應數據。但是,如果API需要驗證用戶身份,我們需要在請求頭中添加token信息。
我們可以在Vue中使用Axios的請求攔截器(Interceptors)來在全局請求中添加token。在Vue項目的main.js中添加以下代碼:
axios.interceptors.request.use(config =>{ const token = localStorage.getItem('access_token') if (token) { config.headers.common['Authorization'] = 'Bearer ' + token } return config }, error =>{ return Promise.reject(error) })
以上代碼的作用是,每次發送請求時,會自動在請求的Header中添加Authorization字段,其值為token。
需要注意的是,在token驗證失敗后,需要跳轉到登錄頁面使用戶重新登錄。 我們可以使用Axios的響應攔截器(Interceptors)來實現:
axios.interceptors.response.use(response =>{ return response }, error =>{ if (error.response.status === 401) { router.push('/login') } return Promise.reject(error) })
以上代碼的作用是,每次請求完成后,判斷響應狀態碼是否為401(未授權),如果是則跳轉到登錄頁面。
最后,我們需要在登錄成功后將token保存到localStorage中:
axios.post('/api/login', { username: 'admin', password: 'admin' }) .then(response =>{ localStorage.setItem('access_token', response.data.token) }) .catch(error =>{ console.log(error) })
以上代碼的作用是,向'/api/login'發送POST請求,如果登錄成功,則將返回的token保存到localStorage中。
以上就是Vue中使用Axios添加token的詳細介紹。在實際項目中,我們需要根據具體的需求來調整代碼,以便更好地滿足業務需求。