vue中 請求攔截器和路由守衛的區別？

以下路由導航守衛和axios攔截，僅提供參考

1. 導航守衛：攔截組件

• 導航守衛就是我們進行某些頁面的時候需要判斷當前用戶是否登錄過，如果登陸過，則可以跳轉，否則重定向到登錄頁面

• 導航守衛只是前端做出判斷，檢查請求頭中是否帶有token，並不能判斷token是否失效

• 導航守衛用於判斷該路由的訪問，該用戶是否需有權限登錄該頁面

登錄攔截邏輯

第一步：路由攔截

首先在定義路由的時候就需要多添加一個自定義字段requireAuth和role，用於判斷該路由的訪問是否需要登錄該用戶是否需有權限登錄該頁面，如果用戶已經登錄，則順利進入路由， 否則就進入登錄頁面。

現在以 superadmin、admin、user 三種不同的用戶角色為例，在定義路由時，加上該路由可以由哪種用戶角色來訪問，代碼如下所示:

比如說，/HelloWorld 頁面這三種用戶角色均可訪問，/SuperAdmin 頁面只能由 superadmin 這一個角色訪問。

{
path: '/HelloWorld',
name: 'HelloWorld',
component: HelloWorld,
meta: {

requireAuth: true,// 添加該字段，表示進入這個路由是需要登錄的

roles: ['superadmin','admin','user']//表示該路由superadmin、admin、user 三種角色都可以訪問

}
},
{
path: '/SuperAdmin',
name: 'SuperAdmin',
component: SuperAdmin,
meta: {requireAuth: true, roles: ['superadmin']}
},
{
path: '/Admin',
name: 'Admin',
component: Admin,
meta: {requireAuth: true, roles: ['admin']}
},
{
path: '/User',
name: 'User',
component: User,
meta: {requireAuth: true, roles: ['user']}

定義完路由后，我們主要是利用vue-router提供的鈎子函數beforeEach()對路由進行判斷。

router.beforeEach((to, from, next) => {

    if (to.meta.requireAuth) {  // 判斷該路由是否需要登錄權限

        if (store.state.token) {  // 通過vuex state獲取當前的token是否存在

            next();

        }

        else { // 說明沒有登陸，則重定向到登陸頁

            next({

                path: '/login',

                query: {redirect: to.fullPath}  // 將跳轉的路由path作為參數，登錄成功后跳轉到該路由

            })

        }

    }

    else {

        next();

    }

})

其中，to.meta中是我們自定義的數據，其中就包括我們剛剛定義的requireAuth字段。通過這個字段來判斷該路由是否需要登錄權限。需要的話，同時當前應用不存在token，則跳轉到登錄頁面，進行登錄。登錄成功后跳轉到目標路由。

登錄攔截到這里就結束了嗎？並沒有。這種方式只是簡單的前端路由控制，並不能真正阻止用戶訪問需要登錄權限的路由。還有一種情況便是：當前token失效了，但是token依然保存在本地。這時候你去訪問需要登錄權限的路由時，實際上應該讓用戶重新登錄。 這時候就需要結合 http 攔截器 + 后端接口返回的http 狀態碼來判斷。

 

2. axios攔截器：攔截后端接口

• 每次發送請求之前判斷vuex或者本地存儲中是否存在token

• 如果存在，則統一在http請求的header都加上token，這樣后台根據token判斷你的登錄情況

• 即使本地存在token，也有可能token是過期的，所以在響應攔截器中要對返回狀態進行判斷

// http request 攔截器
axios.interceptors.request.use( config => { if (store.state.token) { // 判斷是否存在token，如果存在的話，則每個http header都加上token config.headers.Authorization = `token ${store.state.token}`; } return config; }, err => { return Promise.reject(err); }); // http response 攔截器 axios.interceptors.response.use( response => { return response; }, error => { if (error.response) { switch (error.response.status) { case 401: // 返回 401 清除token信息並跳轉到登錄頁面 store.commit(types.LOGOUT); router.replace({ path: 'login', query: {redirect: router.currentRoute.fullPath} }) } } return Promise.reject(error.response.data) // 返回接口返回的錯誤信息 });

3.導航守衛和axios攔截器的區別

• 導航守衛就是路由守衛，想進入一個頁面時，判斷是否有權限訪問(有token，就有權限，沒有就返回)，但並不能判斷是否失效。

• axios攔截器是發送請求判斷token的有效性，如果有就將token放在請求頭里。

• 導航守衛和axios攔截器一起使用，進而來確保登錄的狀態