Vue Router 作為一個強多的路由管理插件，可以幫助我們快速地構(gòu)建單頁應(yīng)用。當應(yīng)用中需要實現(xiàn)權(quán)限控制的時候，Vue Router 提供了很好的解決方案。基于 Vue Router 提供的鉤子函數(shù)及一些相關(guān)的 API，我們可以輕松實現(xiàn)路由跳轉(zhuǎn)前的權(quán)限校驗，保證只有具備權(quán)限的用戶才能訪問相應(yīng)的頁面。

import router from '@/router';
import store from '@/store';
router.beforeEach((to, from ,next) =>{
const userInfo = store.getters['user/userInfo'];
if (to.meta.auth && !userInfo) {
next({
path: '/login',
query: {
redirect: to.fullPath,
},
});
} else {
next();
}
});

上述代碼片段展示了 Vue Router 中的全局前置守衛(wèi) beforeEach 函數(shù)。該函數(shù)會在路由切換前被調(diào)用，我們可以在該函數(shù)中進行用戶權(quán)限認證等操作。在這里，我們從 Vuex 中獲取當前登錄用戶的信息，據(jù)此來判斷用戶是否具備訪問該路由的權(quán)限。如果用戶未登錄且該路由需要登錄后才能訪問，我們可以進行相應(yīng)的跳轉(zhuǎn)，防止用戶越權(quán)訪問。

除了全局守衛(wèi)函數(shù)，Vue Router 還為開發(fā)者提供了路由獨享的守衛(wèi)函數(shù)。在路由配置中，我們可以設(shè)置 beforeEnter 屬性，同時在該屬性中書寫路由獨享的前置守衛(wèi)函數(shù)，這些函數(shù)會在進入該路由時被調(diào)用。

const router = new Router({
routes: [
{
path: '/order',
name: 'order',
component: () =>import('@/views/order/Order.vue'),
beforeEnter: (to, from, next) =>{
const userInfo = store.getters['user/userInfo'];
if (to.meta.auth && !userInfo) {
next({
path: '/login',
query: {
redirect: to.fullPath,
},
});
} else {
next();
}
}
}
]
});

如上所示，我們在路由配置中通過 beforeEnter 屬性設(shè)置了路由獨享的守衛(wèi)函數(shù)。在該函數(shù)中實現(xiàn)了上述全局守衛(wèi)函數(shù)中所述的功能。需要注意的是，路由獨享的守衛(wèi)函數(shù)并不會替代全局守衛(wèi)函數(shù)，在路由跳轉(zhuǎn)過程中，兩者會一起被調(diào)用，以便保證用戶能否訪問該路由的判斷正確。

除了前置守衛(wèi)函數(shù)外，Vue Router 還支持后置守衛(wèi)函數(shù) afterEach。和 beforeEach 函數(shù)類似，該函數(shù)也是全局函數(shù)，會在每次路由完成切換后被調(diào)用。開發(fā)者可以利用該函數(shù)，在路由切換后進行一些必要的清理工作等操作。

router.afterEach(() =>{
window.scrollTo(0, 0);
});

如上所示，我們可以在 afterEach 函數(shù)中調(diào)用 window.scrollTo 函數(shù)，將頁面滾動到頂部。這有助于用戶更好地使用頁面，增強用戶體驗。