导航守卫这里，视频和源码不一致？

Question

导航守卫这里，视频里面是调用checkPermission函数，但是源码是调用了loadAsyncRoutes

Answer 1

提问者 河畔一角 2023-11-14 16:38:53

导航守卫这里，视频的写法是：

说明：直接通过router.getRoutes()获取所有路由，通过filter进行比对，但是这种方式稍微有点问问题，await loadAsyncRoutes()在本地启动时，可以调用，在打包部署到线上时，有用户反馈报错，因为在外部不支持await方式，所以，需要优化一下调用方式。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

await loadAsyncRoutes(); // 判断当前地址是否可以访问 function checkPermission(path) {     let hasPermission = router.getRoutes().filter(route => route.path == path).length;     if (hasPermission) {         return true;     } else {         return false;     } } // 导航守卫 router.beforeEach((to, from, next) => {     if (checkPermission(to.path)) {         document.title = to.meta.title;         next()     } else {         next('/404')     } })

由于不支持await调用，所以课程源码的写法变成了如下方式：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

// 修复线上部署不能访问问题 async function loadAsyncRoutes() {     let userInfo = storage.getItem('userInfo') || {}     if (userInfo.token) {         try {             const { menuList } = await API.getPermissionList()             let routes = utils.generateRoute(menuList)             const modules = import.meta.glob('../views/*.vue')             console.log('views',modules)             routes.map(route => {                 let url = `../views/${route.name}.vue`                 route.component = modules[url];                 router.addRoute("home", route);             })         } catch (error) {                   }     } } loadAsyncRoutes(); // 判断当前地址是否可以访问 /* function checkPermission(path) {     let hasPermission = router.getRoutes().filter(route => route.path == path).length;     if (hasPermission) {         return true;     } else {         return false;     } } */ // 导航守卫 router.beforeEach(async (to, from, next) => {     if (to.name) {         if (router.hasRoute(to.name)) {             document.title = to.meta.title;             next()         } else {             next('/404')         }     } else {         await loadAsyncRoutes()         let curRoute = router.getRoutes().filter(item => item.path == to.path)         if (curRoute?.length) {             document.title = curRoute[0].meta.title;             next({ ...to, replace: true })         } else {             next('/404')         }     } })

先判断路由是否存在，如果存在直接打开，如果不存在，再同步调用菜单接口。