前端——前端路由守卫与权限验证实战

路由守卫是实现页面访问控制的重要手段，结合权限系统可以实现精细化的访问控制。

1 全局前置守卫

// 路由守卫router.beforeEach(async(to,from,next)=>{// 检查是否需要认证if(to.meta.requiresAuth){constisAuthenticated=store.getters.isAuthenticatedif(!isAuthenticated){// 重定向到登录页next({path:'/login',query:{redirect:to.fullPath}})return}}// 检查权限if(to.meta.permissions){constuserPermissions=store.getters.permissionsconsthasPermission=to.meta.permissions.some(permission=>userPermissions.includes(permission))if(!hasPermission){next('/403')// 无权限页面return}}next()})

2 动态路由加载

// 根据用户权限动态加载路由constloadRoutesByPermissions=(permissions)=>{constallowedRoutes=routes.filter(route=>{if(!route.meta?.permissions)returntruereturnroute.meta.permissions.some(p=>permissions.includes(p))})allowedRoutes.forEach(route=>{router.addRoute(route)})}