Vue Router 全局解析守卫实现用户角色权限控制 - 灵活跳转不同页面

"router.beforeResolve(async (to, from, next) => {\n console.log(JSON.parse(localStorage.getItem('roles'))[0]);\n\n const userInfo = {\n // 其他用户信息...\n role: JSON.parse(localStorage.getItem('roles'))[0] // 假设用户角色为 admin\n };\n\n let path = '';\n\n if (userInfo.role === 'admin') {\n path = '/home'; // admin 跳转到 admin 页面\n } else if (userInfo.role === 'teacher') {\n path = '/teacherhome'; // teacher 跳转到 teacher 页面\n } else if (userInfo.role === 'user') {\n path = '/userhome'; // user 跳转到 user 页面\n }\n\n router.push("path")\n})\n修改这个全局解析守卫使其能跳转内容：修改全局解析守卫的代码如下：\n\nrouter.beforeResolve(async (to, from, next) => {\n const userInfo = {\n // 其他用户信息...\n role: JSON.parse(localStorage.getItem('roles'))[0] // 假设用户角色为 admin\n };\n\n let path = '';\n\n if (userInfo.role === 'admin') {\n path = '/home'; // admin 跳转到 admin 页面\n } else if (userInfo.role === 'teacher') {\n path = '/teacherhome'; // teacher 跳转到 teacher 页面\n } else if (userInfo.role === 'user') {\n path = '/userhome'; // user 跳转到 user 页面\n }\n\n if (path !== '') {\n next(path);\n } else {\n next();\n }\n})\n在修改后的代码中，当用户角色为 admin 时，会跳转到 '/home' 页面；当用户角色为 teacher 时，会跳转到 '/teacherhome' 页面；当用户角色为 user 时，会跳转到 '/userhome' 页面。如果用户角色不在这三种情况之内，则不进行跳转。