vue axios實現前端登入攔截

路由攔截（vue+axios實現前端登入攔截）

第二步：***

http配置(結合ui框架)

前言：如果你是求職者，專案寫了運用了axios，面試官可能會問你：

1.為什麼 axios 既可以當函式呼叫，也可以當物件使用，比如axios({})、axios.get。

2.簡述 axios 呼叫流程。

3.有用過***嗎？原理是怎樣的？

4.有使用axios的取消功能嗎？是怎麼實現的？

5.為什麼支援瀏覽器中傳送請求也支援node傳送請求？

諸如這類問題

裡面包含對於封裝以及環境切換的

1. 語法簡潔，更加語義化 2. 基於標準 promise 實現，支援 async/await 3. 同構方便，使用 isomorphic-fetch 4. 更加底層，提供的api豐富（request, response）

5. 脫離了xhr

axios是支援promise的（鏈式寫法），主要是用來向後台傳送請求
axios可以支援併發請求，可以同時請求多個介面。
axios提供了***、catch捕獲
axios可以防止csrf
(跨站請求偽造)    釣魚**  
a頁面登入註冊的時候，跳入b頁面，
b頁面可以獲取你的cookie資訊，然後惡意向別的**散發一些郵件或者其他的東西。
axios/fetch是基於promise,後者主要利用callback的形式  $.
ajax(}
)fetch脫離了xhr，是新的語法，預設不傳cookie,另外也監聽不到請求的進度
axios.
get(url,})
.then
(res=
>).
catch
(err=
>);
axios.
post
(url,).
then
(res=
>).
catch
(err=
>);
axios
(,headers}).
then
(res=
>..
...)

axios封裝：

第一步：路由攔截

首先在定義路由的時候就需要多新增乙個自定義欄位requireauth，用於判斷該路由的訪問是否需要登入。如果使用者已經登入，則順利進入路由，否則就進入登入頁面。 const routes =[, , component: repository },];定義完路由後，我們主要是利用vue-router提供的鉤子函式beforeeach ()對路由進行判斷。 router. beforeeach ((to, from, next) => else // 將跳轉的路由path作為引數，登入成功後跳轉到該路由}) }}else}) 每個鉤子方法接收三個引數： * to: route: 即將要進入的目標路由物件 * from: route: 當前導航正要離開的路由 * next: function: 一定要呼叫該方法來 resolve 這個鉤子。執行效果依賴 next 方法的呼叫引數。 *next() : 進行管道中的下乙個鉤子。如果全部鉤子執行完了，則導航的狀態就是 confirmed （確認的）。 *next (false ): 中斷當前的導航。如果瀏覽器的 url 改變了（可能是使用者手動或者瀏覽器後退按鈕），那麼 url 位址會重置到 from 路由對應的位址。 *next (『/』) 或者 next() : 跳轉到乙個不同的位址。當前的導航被中斷，然後進行乙個新的導航。確保要呼叫 next 方法，否則鉤子就不會被 resolved。其中，to.meta中是我們自定義的資料，其中就包括我們剛剛定義的requireauth欄位。通過這個欄位來判斷該路由是否需要登入許可權。需要的話，同時當前應用不存在token，則跳轉到登入頁面，進行登入。登入成功後跳轉到目標路由。登入攔截到這裡就結束了嗎？並沒有。這種方式只是簡單的前端路由控制，並不能真正阻止使用者訪問需要登入許可權的路由。還有一種情況便是：當前token失效了，但是token依然儲存在本地。這時候你去訪問需要登入許可權的路由時，實際上應該讓使用者重新登入。

這時候就需要結合 http *** + 後端介面返回的http 狀態碼來判斷。

http request***

要想統一處理所有http請求和響應，就得用上 axios 的***。通過配置http response inteceptor，當後端介面返回401 unauthorized（未授權），讓使用者重新登入。 // 返回介面返回的錯誤資訊})

;

首先我們要明白設定***的目的是什麼,當我們需要統一處理http請求和響應時我們通過設定***處理方便很多

這個專案我引入了vant ui框架,所以我是結合vant中loading和message元件來處理的.我們可以單獨建立乙個http的js檔案處理axios,再到main.js中引入.

// 引入axios以及vant ui中的loading和message元件
import axios from 'axios'
import
from 'vant-ui'
// 超時時間
axios.defaults.timeout = 5000
// http請求***
var loadinginstace
axios.interceptors.request.use(config =>
) return config
}, error =>
) return promise.reject
(error)})
// http響應***
axios.interceptors.response.use(data =>
, error =>
) return promise.reject
(error)})
export default axios
這樣我們就統一處理了http請求和響應的攔截.當然我們可以根據具體的業務要求更改攔截中的處理.

vue axios實現前端登入攔截

Vue axios 實現http攔截及路由攔截例項

Vue axios 實現http攔截及路由攔截

Vue axios 實現http攔截及路由攔截

vue axios實現前端登入攔截

Vue axios 實現http攔截及路由攔截例項

Vue axios 實現http攔截及路由攔截

Vue axios 實現http攔截及路由攔截

相關推薦