Vue Router 全局前置守卫函数详解：缓存页面、权限校验、进度条控制

"router.beforeEach((to, from, next) => {\n if (to.meta.keepAlive) {\n store.commit('routecache/keepAlive', to.name)\n }\n clearHttpRequestingList()\n NProgress.start()\n const whiteList = store.getters['permission/getWhiteList']\n if (whiteList.indexOf(to.name) > -1 || whiteList.indexOf(to.path) > -1) {\n next()\n } else if (!store.getters['user/getUserId']) { // 不在白名单必须登录\n // 从后端拿信息 fetchUserInfo 刷新用户信息\n store.dispatch('user/fetchUserInfo').then(res => {\n if (res.status) {\n // 权限校验\n permission(store, routes, to, next)\n } else {\n switch (res.code) {\n case -500:\n next({ name: 'badGateway' })\n break\n case 70005:\n next({ name: 'login' })\n break\n }\n }\n })\n } else {\n // 权限校验\n permission(store, routes, to, next)\n }\n})"的作用内容：这段代码是Vue Router中的全局前置守卫函数，它会在每次路由跳转之前执行。其作用如下：\n\n1. 判断是否需要缓存页面：如果目标路由配置了meta字段中的keepAlive属性为true，则表示需要缓存该页面，将该页面的名称通过store的commit方法传递给routecache/keepAlive来进行缓存。\n\n2. 清空http请求列表：调用clearHttpRequestingList函数，用于清空当前页面正在进行中的http请求。\n\n3. 开始进度条：调用NProgress的start方法，开始显示进度条。\n\n4. 判断是否在白名单中：获取白名单列表，并判断目标路由的名称或路径是否在白名单中。如果在白名单中，则直接跳转到目标路由。\n\n5. 判断是否已登录：如果不在白名单中，则判断用户是否已登录。通过store的getters方法获取用户ID（getUserId）。如果用户未登录，则调用后端接口获取用户信息（fetchUserInfo），并根据返回的结果进行相应的处理。\n\n6. 权限校验：如果用户已登录或获取用户信息成功，则调用permission函数进行权限校验。该函数用于检查用户是否具有访问目标路由的权限，并根据校验结果进行相应的操作（如跳转到登录页或403页面）。\n\n总结起来，这段代码的作用是在路由跳转之前进行相关的处理，包括缓存页面、清空http请求列表、显示进度条、判断是否在白名单中、判断是否已登录以及进行权限校验。