頁(yè)面訪問(wèn)攔截

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

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

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

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

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

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

2.添加攔截器

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

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

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

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

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

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

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

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

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

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

可以返回的值如下:

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

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

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

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

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

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

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

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

// BAD
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  // 如果用戶未能驗(yàn)證身份，則 `next` 會(huì)被調(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:   到哪里去，到哪去的完整路由信息對(duì)象 (路徑，參數(shù))

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

next(): 是否放行

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

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

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

最新評(píng)論