在Vue中,發送POST請求時,需要設置Token才能訪問一些需要權限的接口。Token可以用來驗證用戶身份,所以必須保密并且只能給授權的用戶使用。
axios({ method: 'post', url: '/api/login', data: { username: 'admin', password: '123456' }, headers: { 'Authorization': 'Bearer ' + token } })
在上面的代碼中,我們使用了axios庫來發送POST請求。我們將Token添加到Authorization頭部中作為Bearer。Bearer是一種標準的身份驗證協議,用于在請求中傳遞Token。
在實際項目中,我們一般會在登錄成功后獲取Token,并將其存儲在本地或者sessionStorage中以便之后使用。以下是一個示例:
axios({ method: 'post', url: '/api/login', data: { username: 'admin', password: '123456' } }).then(response =>{ localStorage.setItem('token', response.data.token) }).catch(error =>{ console.log(error) })
在上面的代碼中,我們在登錄成功時從response.data.token中獲取Token,并將其存儲在localStorage中。
在發送所有POST請求前,我們需要從localStorage中獲取Token,并將其添加到Authorization頭部中。以下是一個示例:
const token = localStorage.getItem('token') axios({ method: 'post', url: '/api/posts', data: { title: 'New Post', content: 'This is a new post.' }, headers: { 'Authorization': 'Bearer ' + token } }).then(response =>{ console.log(response) }).catch(error =>{ console.log(error) })
在上面的代碼中,我們首先從localStorage中獲取Token,并通過Bearer添加到Authorization頭部中。然后我們發送一個POST請求來創建一個新的博客帖子。
當我們收到未經授權的錯誤時,可能需要通知用戶重新登錄。以下是一個示例:
axios.interceptors.response.use( response =>{ return response }, error =>{ if (error.response.status === 401) { alert('Please login again.') localStorage.removeItem('token') location.reload() } return Promise.reject(error) } )
在上面的代碼中,我們使用axios攔截器來在收到401錯誤時提示用戶重新登錄。我們還從localStorage中刪除Token,并重新加載頁面以便用戶可以再次登錄。
綜上所述,設置Token是發送POST請求的必要步驟,因為它可以確保只有具有適當授權的用戶才能訪問受保護的API端點。我們可以使用axios庫來設置Token,并使用localStorage來存儲和檢索Token。如果出現未經授權或過期的錯誤,我們可以通過axios攔截器來通知用戶并且重新登錄。