導(dǎo)航守衛(wèi)

若依框架登錄鑒權(quán)詳解（動態(tài)路由）_若依鑒權(quán)-CSDN博客

完整的導(dǎo)航解析流程

1. 導(dǎo)航被觸發(fā)：

   • 當(dāng)用戶點擊頁面中的鏈接、使用編程式導(dǎo)航（如router.push或router.replace）或手動輸入URL時，導(dǎo)航流程被觸發(fā)。

2. 在失活的組件里調(diào)用beforeRouteLeave守衛(wèi)：

   • 如果當(dāng)前有激活的組件（即用戶正在查看的組件），則在該組件內(nèi)調(diào)用beforeRouteLeave守衛(wèi)。這允許組件在離開之前執(zhí)行一些清理工作或條件檢查（如用戶是否保存了更改）。

3. 調(diào)用全局beforeEach守衛(wèi)：

   • 在路由實例上注冊的全局beforeEach守衛(wèi)會在導(dǎo)航確認(rèn)之前被調(diào)用。這是一個全局的鉤子，可以用于執(zhí)行一些通用的檢查或處理邏輯，如身份驗證。

4. 在復(fù)用組件里調(diào)用beforeRouteUpdate守衛(wèi)（Vue Router 2.2+）：

   • 如果目標(biāo)路由和當(dāng)前路由使用相同的組件，并且只是參數(shù)發(fā)生了變化（如從一個用戶頁面導(dǎo)航到另一個用戶頁面，但兩者都使用相同的User組件），則會在該組件內(nèi)調(diào)用beforeRouteUpdate守衛(wèi)。這允許組件在參數(shù)變化時更新其內(nèi)容。

5. 調(diào)用路由配置里的beforeEnter守衛(wèi)：

   • 在路由配置對象中定義的beforeEnter守衛(wèi)會在導(dǎo)航到該路由之前被調(diào)用。這是一個路由獨享的鉤子，可以用于在該路由上執(zhí)行一些特定的邏輯。

6. 解析異步路由組件：

   • 如果目標(biāo)路由是一個異步組件，則此時會解析該異步組件。

7. 在被激活的組件里調(diào)用beforeRouteEnter守衛(wèi)：

   • 在目標(biāo)路由對應(yīng)的組件內(nèi)調(diào)用beforeRouteEnter守衛(wèi)。這允許組件在渲染之前執(zhí)行一些初始化工作。需要注意的是，此時組件實例尚未被創(chuàng)建，因此無法訪問this。但可以通過向next函數(shù)傳遞一個回調(diào)函數(shù)來訪問組件實例。

8. 調(diào)用全局beforeResolve守衛(wèi)（Vue Router 2.5+）：

   • 在導(dǎo)航被確認(rèn)之前，并且在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后，調(diào)用全局beforeResolve守衛(wèi)。這是一個全局的鉤子，可以用于在導(dǎo)航確認(rèn)之前執(zhí)行一些額外的邏輯。

9. 導(dǎo)航被確認(rèn)：

   • 此時，所有的守衛(wèi)和鉤子都已經(jīng)被調(diào)用，并且沒有守衛(wèi)中斷導(dǎo)航。路由實例現(xiàn)在會確認(rèn)導(dǎo)航，并準(zhǔn)備更新DOM。

10. 調(diào)用全局afterEach鉤子：

    • 在導(dǎo)航完成后調(diào)用全局afterEach鉤子。這是一個全局的鉤子，不會接受next函數(shù)，也不會改變導(dǎo)航本身。它主要用于記錄導(dǎo)航的詳細信息或執(zhí)行一些清理工作。

11. 觸發(fā)DOM更新：

    • Vue Router會根據(jù)目標(biāo)路由渲染相應(yīng)的組件，并更新DOM以反映新的視圖。

12. 用創(chuàng)建好的實例調(diào)用beforeRouteEnter守衛(wèi)中傳給next的回調(diào)函數(shù)：

    • 如果在beforeRouteEnter守衛(wèi)中向next函數(shù)傳遞了一個回調(diào)函數(shù)，則此時會調(diào)用該回調(diào)函數(shù)，并將組件實例作為參數(shù)傳遞給它。這允許組件在渲染之后執(zhí)行一些后續(xù)工作。

全局守衛(wèi)（router.beforeEach與router.afterEach）

全局守衛(wèi)是作用于整個Vue應(yīng)用的守衛(wèi)，它們會在任意路由發(fā)生改變時被調(diào)用。全局守衛(wèi)主要包括全局前置守衛(wèi)（router.beforeEach）和全局后置守衛(wèi)（router.afterEach）。

• 全局前置守衛(wèi)：在路由跳轉(zhuǎn)之前執(zhí)行，可以通過調(diào)用router.beforeEach方法注冊。這些守衛(wèi)會按照注冊順序依次執(zhí)行，并且每個守衛(wèi)都有機會中斷導(dǎo)航過程。如果守衛(wèi)函數(shù)返回false或調(diào)用next(false)，則導(dǎo)航會被中斷。如果守衛(wèi)函數(shù)不調(diào)用next()或調(diào)用next('/')、next({ ... })進行重定向，則導(dǎo)航也會中斷。
• 全局后置守衛(wèi)：在導(dǎo)航完成后被調(diào)用，不接受next函數(shù)也不可以中斷導(dǎo)航。它們主要用于做一些清理工作或者修改狀態(tài)。

router.beforeEach((to, from, next) => {NProgress.start()if (getToken()) {//獲取路由的mata.title屬性，并存儲在Vuex中to.meta.title && store.dispatch('settings/setTitle', to.meta.title)/* has token*/if (to.path === '/login') {next({ path: '/' })NProgress.done()} else {if (store.getters.roles.length === 0) {isRelogin.show = true// 判斷當(dāng)前用戶是否已拉取完user_info信息store.dispatch('GetInfo').then(() => {isRelogin.show = falsestore.dispatch('GenerateRoutes').then(accessRoutes => {// 根據(jù)roles權(quán)限生成可訪問的路由表console.log(accessRoutes);router.addRoutes(accessRoutes) // 動態(tài)添加可訪問路由表//通過返回新的位置來觸發(fā)重定向next({ ...to, replace: true }) // hack方法 確保addRoutes已完成})}).catch(err => {store.dispatch('LogOut').then(() => {Message.error(err)next({ path: '/' })})})} else {next()}}} else {// 沒有tokenif (whiteList.indexOf(to.path) !== -1) {// 在免登錄白名單，直接進入next()} else {next(`/login?redirect=${to.fullPath}`) // 否則全部重定向到登錄頁NProgress.done()}}
})router.afterEach(() => {NProgress.done()
})

?路由獨享守衛(wèi)（beforeEnter）

是作用于單個路由或一組路由的守衛(wèi)，可以在路由配置中直接定義。這種守衛(wèi)允許開發(fā)者針對特定的路由實施一些邏輯，例如驗證用戶是否有權(quán)限訪問某個頁面。路由獨享守衛(wèi)只有一個鉤子函數(shù)beforeEnter，它會在進入路由時觸發(fā)，不會在參數(shù)、查詢字符串或哈希值改變時觸發(fā)。

組件內(nèi)守衛(wèi)（beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave。）

組件內(nèi)守衛(wèi)是作用于路由組件內(nèi)的守衛(wèi)，只能在路由組件中使用。這些守衛(wèi)允許開發(fā)者在組件的生命周期鉤子中控制路由導(dǎo)航。組件內(nèi)守衛(wèi)包括beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave。

• beforeRouteEnter：在組件被創(chuàng)建之前調(diào)用，此時組件實例尚未被創(chuàng)建，因此無法訪問this?？梢酝ㄟ^向next函數(shù)傳遞一個回調(diào)函數(shù)來訪問組件實例。
• beforeRouteUpdate：在當(dāng)前路由改變，但是該組件被復(fù)用時調(diào)用。例如，對于一個帶有動態(tài)參數(shù)的路徑/foo/:id，在/foo/1和/foo/2之間導(dǎo)航時，同一個Foo組件實例會被復(fù)用，此時會調(diào)用beforeRouteUpdate守衛(wèi)。
• beforeRouteLeave：在導(dǎo)航離開該組件的對應(yīng)路由時被調(diào)用。它可用于在離開路由前進行一些操作，比如保存用戶編輯的內(nèi)容或詢問用戶是否確定離開。

?動態(tài)路由

1. 權(quán)限管理：在應(yīng)用中，不同用戶可能有不同的訪問權(quán)限。通過動態(tài)路由，我們可以在用戶登錄后根據(jù)其權(quán)限動態(tài)添加或刪除路由，從而控制用戶對不同頁面的訪問。
2. 模塊懶加載：對于大型應(yīng)用，為了優(yōu)化性能，我們可以按需加載不同模塊的路由。在用戶訪問某個模塊時，再動態(tài)添加該模塊的路由配置。
3. 動態(tài)生成菜單：在一些后臺管理系統(tǒng)中，菜單項和對應(yīng)的路由可能是動態(tài)生成的。我們可以根據(jù)后臺返回的菜單配置，動態(tài)生成對應(yīng)的路由。

const router = createRouter({history: createWebHistory(),routes: [{ path: '/:articleName', component: Article }],
})
router.addRoute({ path: '/about', component: About })
//頁面仍然會顯示 Article 組件，我們需要手動調(diào)用 router.replace() 來改變當(dāng)前的位置，并覆蓋我們原來的位置
router.addRoute({ path: '/about', component: About })
// 我們也可以使用 this.$route 或 useRoute()
router.replace(router.currentRoute.value.fullPath)

在導(dǎo)航守衛(wèi)中添加路由

? ? 如果你決定在導(dǎo)航守衛(wèi)內(nèi)部添加或刪除路由，你不應(yīng)該調(diào)用?router.replace()，而是通過返回新的位置來觸發(fā)重定向：

 
store.dispatch('GenerateRoutes').then(accessRoutes => {// 根據(jù)roles權(quán)限生成可訪問的路由表console.log(accessRoutes);router.addRoutes(accessRoutes) // 動態(tài)添加可訪問路由表//通過返回新的位置來觸發(fā)重定向next({ ...to, replace: true }) // hack方法 確保addRoutes已完成})
--------------------------------------------------------------------------
router.beforeEach(to => {if (!hasNecessaryRoute(to)) {router.addRoute(generateRoute(to))// 觸發(fā)重定向return to.fullPath}
})

過渡效果?

原生CSS中transation與animation

CSS中的Transition（過渡效果）和Animation（動畫）是實現(xiàn)網(wǎng)頁動態(tài)效果的重要技術(shù)，能夠提升用戶體驗，使網(wǎng)頁看起來更加生動和吸引人。以下是兩者的詳細介紹：

一、CSS Transition（過渡效果）

1. 基本概念

   CSS Transition允許元素從一種樣式狀態(tài)平滑地改變?yōu)榱硪环N樣式狀態(tài)，通常用于簡單的動態(tài)效果，如按鈕的懸停狀態(tài)、元素的顯示和隱藏等。

2. 主要屬性

   • transition-property：指定應(yīng)用過渡效果的CSS屬性名稱，如width、height、background-color等。也可以使用“all”來指定所有可動畫屬性。
   • transition-duration：定義過渡效果完成所需的時間，單位可以是秒（s）或毫秒（ms）。
   • transition-timing-function：描述過渡效果的速度曲線，如linear（線性）、ease（慢到快再到慢）、ease-in（慢到快）、ease-out（快到慢）和ease-in-out（慢到快再到慢，但比ease更平緩）。還可以使用cubic-bezier函數(shù)來自定義速度曲線。
   • transition-delay：定義過渡效果開始前的延遲時間，單位同樣可以是秒（s）或毫秒（ms）。
   • transition：上述四個屬性的簡寫形式，按順序分別指定transition-property、transition-duration、transition-timing-function和transition-delay。

3. 使用示例

   .box { 
   width: 100px; 
   height: 100px; 
   background-color: red; 
   transition: width 1s ease-in-out; 
   } .box:hover { 
   width: 200px; 
   }

   當(dāng)鼠標(biāo)懸停在具有“.box”類的元素上時，元素的寬度會從100px平滑地過渡到200px，過渡效果持續(xù)1秒，采用緩入緩出的時間函數(shù)。

4. 注意事項

   • 過渡效果不會應(yīng)用于display、visibility等少數(shù)CSS屬性。
   • 過渡效果在元素從不可見變?yōu)榭梢姇r不會觸發(fā)，除非是通過改變opacity或其他可以產(chǎn)生類似效果的屬性來實現(xiàn)可見性的變化。
   • 如果過渡效果的目標(biāo)值與起始值相同，過渡效果將不會觸發(fā)。
   • 過渡效果在元素或其父元素被隱藏（如display: none）時不會運行。

二、CSS Animation（動畫）

1. 基本概念

   CSS Animation比Transition更為強大，它允許創(chuàng)建更復(fù)雜的動畫效果，可以包含多個步驟和關(guān)鍵幀。

2. 主要屬性

   • animation-name：指定要綁定到選擇器的關(guān)鍵幀的名稱。
   • animation-duration：定義動畫完成一個周期需要多少秒或毫秒。
   • animation-timing-function：指定動畫將如何完成一個周期，與Transition中的transition-timing-function類似，也可以使用cubic-bezier函數(shù)來自定義速度曲線。
   • animation-delay：定義動畫什么時候開始，單位可以是秒（s）或毫秒（ms），也可以是負(fù)值以表示跳過部分動畫。
   • animation-iteration-count：定義動畫應(yīng)該播放多少次，可以是具體次數(shù)或infinite（無限循環(huán)）。
   • animation-direction：定義是否循環(huán)交替反向播放動畫，如normal（正向播放）、reverse（反向播放）、alternate（交替正向和反向播放）等。
   • animation-fill-mode：規(guī)定當(dāng)動畫不播放時（如動畫完成時、有延遲未開始播放時）要應(yīng)用到元素的樣式，如none、forwards（動畫結(jié)束時保持最后一幀的樣式）等。
   • animation-play-state：指定動畫是否正在運行或已暫停。
   • animation：上述屬性的簡寫形式，按順序分別指定各屬性的值。

3. 使用示例

   .box-max { 
   width: 100px; 
   height: 100px; 
   background-color: aqua; 
   animation-name: box1; 
   animation-duration: 3s; 
   } @keyframes box1 { 
   0% { 
   opacity: 1; 
   } 
   100% { 
   opacity: 0.3; 
   } 
   }

   這個示例創(chuàng)建了一個名為“.box-max”的元素，并應(yīng)用了一個名為“box1”的動畫。動畫使元素的透明度從1逐漸變?yōu)?.3，持續(xù)時間為3秒。

4. 注意事項

   • 使用Animation時，規(guī)需要配合@keyframes則來定義動畫的關(guān)鍵幀。
   • 動畫的性能可能會受到多個因素的影響，如動畫的復(fù)雜度、元素的數(shù)量等。因此，在使用動畫時需要注意性能優(yōu)化，如避免對大量元素同時應(yīng)用復(fù)雜的動畫效果。

Vue中transition

<transition>組件會在其包裹的內(nèi)容（一個元素或組件）進入和離開DOM時，自動應(yīng)用過渡效果。這些過渡效果可以通過CSS過渡（transition）或CSS動畫（animation）來實現(xiàn)。

常見屬性

1. name：用于指定過渡效果的名稱。如果不指定，Vue會使用默認(rèn)的類名前綴v-。指定后，Vue會使用指定的名稱作為類名前綴，如fade-enter-active。
2. mode：用于設(shè)置過渡的模式?？梢允?code>in-out（先完成當(dāng)前元素的過渡，然后新元素開始過渡）或out-in（先讓當(dāng)前元素過渡出去，然后新元素開始過渡）。默認(rèn)是in-out。
3. type：指定過渡效果的類型，可以是transition（CSS過渡）或animation（CSS動畫）。Vue 2.9.0+版本支持。如果不指定，Vue會根據(jù)元素的樣式自動判斷。
4. duration：設(shè)置過渡效果的持續(xù)時間，單位是毫秒?？梢允且粋€固定的值，也可以是一個對象，分別指定進入和離開的持續(xù)時間。Vue 2.9.0+版本支持。

常見鉤子

1. before-enter：進入過渡之前調(diào)用。
2. enter：進入過渡被觸發(fā)時調(diào)用。
3. after-enter：進入過渡結(jié)束后調(diào)用。
4. enter-cancelled：在進入過渡被取消時調(diào)用（比如通過切換v-if條件來取消過渡）。
5. before-leave：離開過渡之前調(diào)用。
6. leave：離開過渡被觸發(fā)時調(diào)用。
7. after-leave：離開過渡結(jié)束后調(diào)用。
8. leave-cancelled：在離開過渡被取消時調(diào)用。

為過渡命名

<Transition name="fade">...
</Transition>.fade-enter-active,
.fade-leave-active {transition: opacity 0.5s ease;
}.fade-enter-from,
.fade-leave-to {opacity: 0;
}

與原生CSS的transition一同使用

<Transition name="slide-fade"><p v-if="show">hello</p>
</Transition>/*進入和離開動畫可以使用不同持續(xù)時間和速度曲線。
*/
.slide-fade-enter-active {transition: all 0.3s ease-out;
}.slide-fade-leave-active {transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}.slide-fade-enter-from,
.slide-fade-leave-to {transform: translateX(20px);opacity: 0;
}

與原生animation一同使用?

<Transition name="bounce"><p v-if="show" style="text-align: center;">Hello here is some bouncy text!</p>
</Transition>.bounce-enter-active {animation: bounce-in 0.5s;
}
.bounce-leave-active {animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {0% {transform: scale(0);}50% {transform: scale(1.25);}100% {transform: scale(1);}
}

深層級過渡與顯式過渡時長

<Transition name="nested"><div v-if="show" class="outer"><div class="inner">Hello</div></div>
</Transition>/* 應(yīng)用于嵌套元素的規(guī)則 */
.nested-enter-active .inner,
.nested-leave-active .inner {transition: all 0.3s ease-in-out;
}.nested-enter-from .inner,
.nested-leave-to .inner {transform: translateX(30px);opacity: 0;
}/* ... 省略了其他必要的 CSS *//*我們甚至可以在深層元素上添加一個過渡延遲，從而創(chuàng)建一個帶漸進延遲的動畫序列：*//* 延遲嵌套元素的進入以獲得交錯效果 */
.nested-enter-active .inner {transition-delay: 0.25s;
}

然而，這會帶來一個小問題。默認(rèn)情況下，<Transition>?組件會通過監(jiān)聽過渡根元素上的第一個?transitionend?或者?animationend?事件來嘗試自動判斷過渡何時結(jié)束。而在嵌套的過渡中，期望的行為應(yīng)該是等待所有內(nèi)部元素的過渡完成。

在這種情況下，你可以通過向?<Transition>?組件傳入?duration?prop 來顯式指定過渡的持續(xù)時間 (以毫秒為單位)?？偝掷m(xù)時間應(yīng)該匹配延遲加上內(nèi)部元素的過渡持續(xù)時間

<Transition :duration="550">...</Transition><Transition :duration="{ enter: 500, leave: 800 }">...</Transition>

keep-alive& transition?&router-view

<router-view v-slot="{ Component }"><transition><keep-alive><component :is="Component" /></keep-alive></transition>
</router-view>