頁面訪問攔截

目標(biāo)：基于全局前置守衛(wèi)，進行頁面訪問攔截處理

說明： 大家在做前端項目的時候，大部分頁面， 游客都可以直接訪問 , 如遇到 需要登錄 才能進行的操作，頁面將提示并跳轉(zhuǎn)到登錄界面

但是 ： 對于 支付頁，訂單頁 等，必須是登錄的用戶才能訪問的，游客不能進入該頁面， 需要做攔截處理

那么如何才能實現(xiàn)頁面攔截并跳轉(zhuǎn)到對應(yīng)的登錄界面呢？ 

1.創(chuàng)建axios實例

// 創(chuàng)建 axios 實例，將來對創(chuàng)建出來的實例，進行自定義配置
// 好處：不會污染原始的 axios 實例
import axios from 'axios'
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

2.添加攔截器

在請求或響應(yīng)被 then 或 catch 處理前攔截它們。 

// 添加請求攔截器
instance.interceptors.request.use(function (config) {
    // 在發(fā)送請求之前做些什么
    return config;
  }, function (error) {
    // 對請求錯誤做些什么
    return Promise.reject(error);
  });
// 添加響應(yīng)攔截器
instance.interceptors.response.use(function (response) {
    // 2xx 范圍內(nèi)的狀態(tài)碼都會觸發(fā)該函數(shù)。
    // 對響應(yīng)數(shù)據(jù)做點什么
    return response;
  }, function (error) {
    // 超出 2xx 范圍的狀態(tài)碼都會觸發(fā)該函數(shù)。
    // 對響應(yīng)錯誤做點什么
    return Promise.reject(error);
  });

3.全局前置守衛(wèi)

vue-router 提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。

訪問權(quán)限頁面時，攔截或放行的關(guān)鍵點？ → 用戶是否有登錄權(quán)證 token

你可以使用 router.beforeEach 注冊一個全局前置守衛(wèi)： 

const router = createRouter({ ... })
router.beforeEach((to, from) => {
  // ...
  // 返回 false 以取消導(dǎo)航
  return false
})

當(dāng)一個導(dǎo)航觸發(fā)時，全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用。守衛(wèi)是異步解析執(zhí)行，此時導(dǎo)航在所有守衛(wèi) resolve 完之前一直處于等待中。

每個守衛(wèi)方法接收兩個參數(shù)：

• to: 即將要進入的目標(biāo) 用一種標(biāo)準化的方式
• from: 當(dāng)前導(dǎo)航正要離開的路由 用一種標(biāo)準化的方式

可以返回的值如下:

• false: 取消當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了(可能是用戶手動或者瀏覽器后退按鈕)，那么 URL 地址會重置到 from 路由對應(yīng)的地址。
• 一個路由地址: 通過一個路由地址跳轉(zhuǎn)到一個不同的地址，就像你調(diào)用 router.push() 一樣，你可以設(shè)置諸如 replace: true 或 name: 'home' 之類的配置。當(dāng)前的導(dǎo)航被中斷，然后進行一個新的導(dǎo)航，就和 from 一樣。 

router.beforeEach(async (to, from) => {
   if (
     // 檢查用戶是否已登錄
     !isAuthenticated &&
     // ?? 避免無限重定向
     to.name !== 'Login'
   ) {
     // 將用戶重定向到登錄頁面
     return { name: 'Login' }
   }
 })

如果遇到了意料之外的情況，可能會拋出一個 Error。這會取消導(dǎo)航并且調(diào)用 router.onError() 注冊過的回調(diào)。

如果什么都沒有，undefined 或返回 true，則導(dǎo)航是有效的，并調(diào)用下一個導(dǎo)航守衛(wèi)

以上所有都同 async 函數(shù) 和 Promise 工作方式一樣：

router.beforeEach(async (to, from) => {
  // canUserAccess() 返回 `true` 或 `false`
  const canAccess = await canUserAccess(to)
  if (!canAccess) return '/login'
})

可選的第三個參數(shù) next

在之前的 Vue Router 版本中，也是可以使用 第三個參數(shù) next 的。這是一個常見的錯誤來源，可以通過 RFC 來消除錯誤。然而，它仍然是被支持的，這意味著你可以向任何導(dǎo)航守衛(wèi)傳遞第三個參數(shù)。在這種情況下，確保 next 在任何給定的導(dǎo)航守衛(wèi)中都被嚴格調(diào)用一次。它可以出現(xiàn)多于一次，但是只能在所有的邏輯路徑都不重疊的情況下，否則鉤子永遠都不會被解析或報錯。這里有一個在用戶未能驗證身份時重定向到/login的錯誤用例：

// BAD
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  // 如果用戶未能驗證身份，則 `next` 會被調(diào)用兩次
  next()
})

下面是正確的版本: 

// GOOD
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

總結(jié)：

全局前置導(dǎo)航守衛(wèi)

to:   到哪里去，到哪去的完整路由信息對象 (路徑，參數(shù))

from: 從哪里來，從哪來的完整路由信息對象 (路徑，參數(shù))

next(): 是否放行

(1) next()     直接放行，放行到to要去的路徑

(2) next(路徑)  進行攔截，攔截到next里面配置的路徑 

到此這篇關(guān)于用Vue實現(xiàn)頁面訪問攔截的方法詳解的文章就介紹到這了,更多相關(guān)Vue實現(xiàn)頁面訪問攔截內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論