在Web開發中,實現用戶登錄功能是不可避免的。而為了保證網站的安全,我們會對一些需要用戶登錄才能訪問的頁面或者功能進行限制。這就需要用到登錄攔截。在Vue框架中,我們可以通過使用axios攔截器來進行登錄攔截的實現。
首先,我們需要在Vue項目中安裝axios,可以使用npm命令進行安裝:
npm install axios --save
安裝完成后,在main.js文件中引入axios:
import axios from 'axios' Vue.prototype.$http = axios
接下來,我們需要在axios中添加攔截器。這里我們需要使用axios的攔截器功能,對請求進行攔截,在請求頭中添加token信息。
// 添加請求攔截器 axios.interceptors.request.use( function (config) { // 在發送請求之前添加token信息 if (localStorage.getItem('token')) { config.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token') } return config }, function (error) { return Promise.reject(error) } )
上述代碼中,我們使用了axios的interceptors屬性,對請求進行了攔截。在請求頭中添加了一個Authorization字段,將當前用戶的token信息進行了傳遞。這里我們使用了localStorage存儲token信息,當用戶登錄成功后,我們將token存儲在localStorage中。
接下來,我們需要對返回數據進行攔截,判斷用戶的登錄狀態是否過期。如果登錄狀態已過期,則跳轉到登錄頁面,讓用戶重新登錄。
// 添加響應攔截器 axios.interceptors.response.use( function (response) { return response }, function (error) { // 如果返回的錯誤是沒有登錄,則跳轉到登錄頁面 if (error.response.status === 401) { router.push('/login') } return Promise.reject(error) } )
上述代碼中,我們對響應進行了攔截,并判斷了返回的錯誤碼。如果是401,則跳轉到登錄頁進行重新登錄。這里我們使用了Vue Router來進行跳轉。
最后,我們需要在需要進行登錄驗證的頁面或組件中使用我們剛才添加的攔截器。在頁面或組件的mounted()函數中添加如下代碼:
mounted() { axios.get('http://api.example.com/user') .then(response =>{ // do something }) .catch(error =>{ console.log(error) }) }
上述代碼中,我們使用了axios發送一次請求并在結果返回后進行了一些操作。在這個過程中,axios會自動使用我們剛才添加的攔截器,傳遞token信息,進行登錄攔截。
以上就是使用Vue和axios實現登錄攔截的整個過程。在實際開發中,我們需要對實現進行一定的改變,使其滿足我們的實際需求。但是使用axios攔截器來進行登錄攔截是一種可行的方案,可以有效地保證Web應用的安全性。