当前位置：首页 > news >正文

Vue3从入门到精通： 4.2 Vue Router路由守卫与权限控制深度解析

news 2025/8/15 5:46:18

👋 大家好，我是 阿问学长！专注于分享优质开源项目解析、毕业设计项目指导支持、幼小初高的教辅资料推荐等，欢迎关注交流！🚀

Vue Router路由守卫与权限控制深度解析

🎯 学习目标

通过本文，你将深入掌握：

路由守卫的设计理念和执行机制
全局守卫、路由守卫、组件守卫的应用场景
企业级权限控制系统的设计和实现
动态权限验证和角色管理的最佳实践
路由守卫的性能优化和错误处理策略

🛡️ 路由守卫的设计理念

守卫系统的架构思想

Vue Router的守卫系统基于"洋葱模型"设计，提供了多层次的拦截和控制机制。这种设计允许开发者在路由跳转的不同阶段插入自定义逻辑，实现精细化的访问控制。

传统权限控制的问题：

// ❌ 传统方式：在组件内部进行权限检查
export default {async created() {// 每个组件都需要重复的权限检查逻辑if (!this.$store.state.user.isAuthenticated) {this.$router.push('/login')return}if (!this.hasPermission('view-dashboard')) {this.$router.push('/forbidden')return}// 业务逻辑await this.loadDashboardData()},methods: {hasPermission(permission) {// 权限检查逻辑分散在各个组件中return this.$store.state.user.permissions.includes(permission)}}
}

路由守卫的优雅解决方案：

// ✅ 路由守卫：集中化的权限控制
const router = createRouter({history: createWebHistory(),routes: [{path: '/dashboard',component: Dashboard,meta: {requiresAuth: true,permissions: ['view-dashboard'],roles: ['admin', 'user']}}]
})// 全局前置守卫：统一的权限检查
router.beforeEach(async (to, from, next) => {const authStore = useAuthStore()// 认证检查if (to.meta.requiresAuth && !authStore.isAuthenticated) {return next('/login')}// 权限检查if (to.meta.permissions && !authStore.hasPermissions(to.meta.permissions)) {return next('/forbidden')}next()
})

守卫执行的完整流程

理解守卫的执行顺序对于构建复杂的权限系统至关重要：

// 守卫执行流程示例
const guardExecutionFlow = {// 1. 全局前置守卫（按注册顺序执行）globalBeforeGuards: [// 认证守卫async (to, from, next) => {console.log('1. 执行认证检查')const isAuthenticated = await checkAuthentication()if (!isAuthenticated && to.meta.requiresAuth) {return next('/login')}next()},// 权限守卫async (to, from, next) => {console.log('2. 执行权限检查')const hasPermission = await checkPermissions(to.meta.permissions)if (!hasPermission) {return next('/forbidden')}next()},// 数据预加载守卫async (to, from, next) => {console.log('3. 执行数据预加载')if (to.meta.preload) {await preloadRouteData(to)}next()}],// 2. 路由独享守卫routeBeforeEnter: async (to, from, next) => {console.log('4. 执行路由独享守卫')// 特定路由的检查逻辑next()},// 3. 组件内守卫componentGuards: {beforeRouteEnter: (to, from, next) => {console.log('5. 组件beforeRouteEnter')next()},beforeRouteUpdate: (to, from, next) => {console.log('6. 组件beforeRouteUpdate')next()},beforeRouteLeave: (to, from, next) => {console.log('7. 组件beforeRouteLeave')next()}},// 4. 全局解析守卫globalResolveGuards: [(to, from, next) => {console.log('8. 全局解析守卫')next()}],// 5. 全局后置钩子globalAfterHooks: [(to, from) => {console.log('9. 全局后置钩子')// 页面统计、标题更新等}]
}

🔐 企业级权限控制系统

RBAC权限模型的实现

基于角色的访问控制（RBAC）是企业应用中最常用的权限模型：

// 权限管理核心类
class PermissionManager {constructor() {this.permissions = new Map()this.roles = new Map()this.userRoles = new Map()this.rolePermissions = new Map()}// 定义权限definePermission(permission) {const { id, name, description, resource, action } = permissionthis.permissions.set(id, {id,name,description,resource, // 资源类型：user, project, report等action,   // 操作类型：create, read, update, delete等createdAt: Date.now()})}// 定义角色defineRole(role) {const { id, name, description, level } = rolethis.roles.set(id, {id,name,description,level, // 角色级别，用于层级权限控制createdAt: Date.now()})}// 为角色分配权限assignPermissionToRole(roleId, permissionId) {if (!this.rolePermissions.has(roleId)) {this.rolePermissions.set(roleId, new Set())}this.rolePermissions.get(roleId).add(permissionId)}// 为用户分配角色assignRoleToUser(userId, roleId) {if (!this.userRoles.has(userId)) {this.userRoles.set(userId, new Set())}this.userRoles.get(userId).add(roleId)}// 检查用户是否有特定权限hasPermission(userId, permissionId) {const userRoles = this.userRoles.get(userId) || new Set()for (const roleId of userRoles) {const rolePermissions = this.rolePermissions.get(roleId) || new Set()if (rolePermissions.has(permissionId)) {return true}}return false}// 检查用户是否有特定角色hasRole(userId, roleId) {const userRoles = this.userRoles.get(userId) || new Set()return userRoles.has(roleId)}// 获取用户的所有权限getUserPermissions(userId) {const userRoles = this.userRoles.get(userId) || new Set()const permissions = new Set()for (const roleId of userRoles) {const rolePermissions = this.rolePermissions.get(roleId) || new Set()for (const permissionId of rolePermissions) {permissions.add(permissionId)}}return Array.from(permissions).map(id => this.permissions.get(id))}// 检查资源级权限hasResourcePermission(userId, resource, action, resourceId = null) {const userPermissions = this.getUserPermissions(userId)return userPermissions.some(permission => {// 基础权限检查if (permission.resource === resource && permission.action === action) {// 如果没有指定资源ID，表示有全局权限if (!resourceId) return true// 检查特定资源的权限return this.checkResourceAccess(userId, resource, resourceId)}return false})}// 检查特定资源的访问权限checkResourceAccess(userId, resource, resourceId) {// 这里可以实现更复杂的资源级权限逻辑// 例如：用户只能访问自己创建的资源，或者所属部门的资源return true // 简化实现}
}// 初始化权限系统
const permissionManager = new PermissionManager()// 定义权限
const permissions = [{ id: 'user.create', name: '创建用户', resource: 'user', action: 'create' },{ id: 'user.read', name: '查看用户', resource: 'user', action: 'read' },{ id: 'user.update', name: '更新用户', resource: 'user', action: 'update' },{ id: 'user.delete', name: '删除用户', resource: 'user', action: 'delete' },{ id: 'project.create', name: '创建项目', resource: 'project', action: 'create' },{ id: 'project.read', name: '查看项目', resource: 'project', action: 'read' },{ id: 'report.read', name: '查看报表', resource: 'report', action: 'read' }
]permissions.forEach(permission => {permissionManager.definePermission(permission)
})// 定义角色
const roles = [{ id: 'admin', name: '管理员', level: 100 },{ id: 'manager', name: '经理', level: 50 },{ id: 'user', name: '普通用户', level: 10 }
]roles.forEach(role => {permissionManager.defineRole(role)
})// 分配权限给角色
// 管理员拥有所有权限
permissions.forEach(permission => {permissionManager.assignPermissionToRole('admin', permission.id)
})// 经理拥有部分权限
['user.read', 'user.update', 'project.create', 'project.read', 'report.read'].forEach(permissionId => {permissionManager.assignPermissionToRole('manager', permissionId)
})// 普通用户只有基础权限
['project.read', 'report.read'].forEach(permissionId => {permissionManager.assignPermissionToRole('user', permissionId)
})

动态权限验证系统

// 动态权限验证器
class DynamicPermissionValidator {constructor(permissionManager) {this.permissionManager = permissionManagerthis.validationRules = new Map()this.contextProviders = new Map()}// 注册验证规则registerRule(name, rule) {this.validationRules.set(name, rule)}// 注册上下文提供者registerContextProvider(name, provider) {this.contextProviders.set(name, provider)}// 验证权限async validate(userId, permission, context = {}) {// 基础权限检查if (!this.permissionManager.hasPermission(userId, permission)) {return { allowed: false, reason: 'insufficient_permission' }}// 动态规则验证const rule = this.validationRules.get(permission)if (rule) {try {// 获取验证上下文const validationContext = await this.buildContext(userId, context)// 执行验证规则const result = await rule(userId, validationContext)if (!result.allowed) {return result}} catch (error) {console.error(`权限验证规则执行失败: ${permission}`, error)return { allowed: false, reason: 'validation_error', error }}}return { allowed: true }}// 构建验证上下文async buildContext(userId, baseContext) {const context = { ...baseContext, userId }// 执行上下文提供者for (const [name, provider] of this.contextProviders) {try {context[name] = await provider(userId, context)} catch (error) {console.error(`上下文提供者执行失败: ${name}`, error)}}return context}// 批量验证权限async validateBatch(userId, permissions, context = {}) {const results = {}for (const permission of permissions) {results[permission] = await this.validate(userId, permission, context)}return results}
}// 初始化动态验证器
const validator = new DynamicPermissionValidator(permissionManager)// 注册上下文提供者
validator.registerContextProvider('userInfo', async (userId) => {return await userApi.getUser(userId)
})validator.registerContextProvider('userDepartment', async (userId) => {const user = await userApi.getUser(userId)return await departmentApi.getDepartment(user.departmentId)
})// 注册验证规则
validator.registerRule('user.update', async (userId, context) => {const { targetUserId, userInfo, userDepartment } = context// 用户只能更新自己的信息if (targetUserId === userId) {return { allowed: true }}// 经理可以更新同部门用户的信息if (userInfo.role === 'manager') {const targetUser = await userApi.getUser(targetUserId)if (targetUser.departmentId === userDepartment.id) {return { allowed: true }}}return { allowed: false, reason: 'insufficient_authority',message: '您只能更新自己或同部门用户的信息'}
})validator.registerRule('project.delete', async (userId, context) => {const { projectId, userInfo } = context// 只有项目创建者或管理员可以删除项目const project = await projectApi.getProject(projectId)if (project.createdBy === userId || userInfo.role === 'admin') {return { allowed: true }}return {allowed: false,reason: 'not_project_owner',message: '只有项目创建者或管理员可以删除项目'}
})

路由级权限守卫的实现

// 高级路由权限守卫
class AdvancedRouteGuard {constructor(router, permissionManager, validator) {this.router = routerthis.permissionManager = permissionManagerthis.validator = validatorthis.setupGuards()}setupGuards() {// 认证守卫this.router.beforeEach(async (to, from, next) => {if (to.meta.requiresAuth) {const authStore = useAuthStore()if (!authStore.isAuthenticated) {return next({name: 'Login',query: { redirect: to.fullPath }})}// 检查用户状态if (authStore.user.status === 'suspended') {return next({ name: 'AccountSuspended' })}if (authStore.user.status === 'pending') {return next({ name: 'AccountPending' })}}next()})// 权限守卫this.router.beforeEach(async (to, from, next) => {const authStore = useAuthStore()if (!authStore.isAuthenticated) {return next()}// 角色检查if (to.meta.roles && to.meta.roles.length > 0) {const hasRole = to.meta.roles.some(role => this.permissionManager.hasRole(authStore.user.id, role))if (!hasRole) {return next({ name: 'Forbidden',params: { reason: 'insufficient_role' }})}}// 权限检查if (to.meta.permissions && to.meta.permissions.length > 0) {const permissionResults = await this.validator.validateBatch(authStore.user.id,to.meta.permissions,{ route: to, fromRoute: from })const deniedPermissions = Object.entries(permissionResults).filter(([_, result]) => !result.allowed).map(([permission, result]) => ({ permission, result }))if (deniedPermissions.length > 0) {return next({name: 'Forbidden',params: { reason: 'insufficient_permission',details: deniedPermissions}})}}// 动态权限检查if (to.meta.dynamicPermission) {const result = await this.validator.validate(authStore.user.id,to.meta.dynamicPermission,{ route: to, fromRoute: from,...to.params })if (!result.allowed) {return next({name: 'Forbidden',params: { reason: result.reason,message: result.message}})}}next()})// 数据预加载守卫this.router.beforeEach(async (to, from, next) => {if (to.meta.preloadData) {const loadingStore = useLoadingStore()try {loadingStore.setLoading(true, '正在加载页面数据...')await this.preloadRouteData(to)next()} catch (error) {console.error('路由数据预加载失败:', error)// 根据错误类型决定处理方式if (error.status === 403) {return next({ name: 'Forbidden' })} else if (error.status === 404) {return next({ name: 'NotFound' })} else {return next({ name: 'Error', params: { error } })}} finally {loadingStore.setLoading(false)}} else {next()}})// 页面离开确认守卫this.router.beforeEach(async (to, from, next) => {if (from.meta.confirmLeave) {const confirmed = await this.confirmLeave(from, to)if (!confirmed) {return next(false)}}next()})}async preloadRouteData(route) {const preloadConfig = route.meta.preloadDataif (typeof preloadConfig === 'function') {return await preloadConfig(route)}if (Array.isArray(preloadConfig)) {const promises = preloadConfig.map(loader => loader(route))return await Promise.all(promises)}throw new Error('Invalid preload configuration')}async confirmLeave(fromRoute, toRoute) {// 检查是否有未保存的更改const hasUnsavedChanges = this.checkUnsavedChanges(fromRoute)if (hasUnsavedChanges) {return await this.showLeaveConfirmation(fromRoute, toRoute)}return true}checkUnsavedChanges(route) {// 检查表单状态、编辑器状态等const formStore = useFormStore()return formStore.hasUnsavedChanges(route.name)}async showLeaveConfirmation(fromRoute, toRoute) {const modalStore = useModalStore()return new Promise((resolve) => {modalStore.showConfirm({title: '确认离开',message: '您有未保存的更改，确定要离开当前页面吗？',confirmText: '离开',cancelText: '取消',onConfirm: () => resolve(true),onCancel: () => resolve(false)})})}
}// 初始化路由守卫
const routeGuard = new AdvancedRouteGuard(router, permissionManager, validator)

🎨 组件级权限控制

权限指令的实现

// 权限控制指令
const permissionDirective = {mounted(el, binding, vnode) {checkPermission(el, binding, vnode)},updated(el, binding, vnode) {checkPermission(el, binding, vnode)}
}function checkPermission(el, binding, vnode) {const { value, modifiers, arg } = bindingconst authStore = useAuthStore()if (!authStore.isAuthenticated) {removeElement(el, modifiers)return}let hasPermission = falseif (typeof value === 'string') {// 单个权限检查hasPermission = permissionManager.hasPermission(authStore.user.id, value)} else if (Array.isArray(value)) {// 多个权限检查if (modifiers.all) {// 需要所有权限hasPermission = value.every(permission => permissionManager.hasPermission(authStore.user.id, permission))} else {// 需要任一权限hasPermission = value.some(permission => permissionManager.hasPermission(authStore.user.id, permission))}} else if (typeof value === 'object') {// 复杂权限检查const { permissions, roles, validator: customValidator } = value// 权限检查if (permissions) {const permissionCheck = Array.isArray(permissions)? permissions.some(p => permissionManager.hasPermission(authStore.user.id, p)): permissionManager.hasPermission(authStore.user.id, permissions)if (!permissionCheck) {hasPermission = false}}// 角色检查if (roles && hasPermission !== false) {const roleCheck = Array.isArray(roles)? roles.some(r => permissionManager.hasRole(authStore.user.id, r)): permissionManager.hasRole(authStore.user.id, roles)hasPermission = roleCheck}// 自定义验证器if (customValidator && hasPermission !== false) {hasPermission = customValidator(authStore.user, vnode.ctx)}}if (!hasPermission) {removeElement(el, modifiers)} else {restoreElement(el)}
}function removeElement(el, modifiers) {if (modifiers.hide) {// 隐藏元素el.style.display = 'none'} else if (modifiers.disable) {// 禁用元素el.disabled = trueel.classList.add('permission-disabled')} else {// 移除元素if (el.parentNode) {el.parentNode.removeChild(el)}}
}function restoreElement(el) {if (el.style.display === 'none') {el.style.display = ''}if (el.disabled) {el.disabled = falseel.classList.remove('permission-disabled')}
}// 注册指令
app.directive('permission', permissionDirective)

权限组件的封装

<!-- PermissionWrapper.vue -->
<template><div v-if="hasPermission" class="permission-wrapper"><slot v-if="!loading"></slot><div v-else class="permission-loading"><LoadingSpinner /><span>正在验证权限...</span></div></div><div v-else-if="showFallback" class="permission-fallback"><slot name="fallback"><div class="no-permission"><Icon name="lock" /><p>{{ fallbackMessage }}</p></div></slot></div>
</template><script>
import { ref, computed, watch, onMounted } from 'vue'
import { useAuthStore } from '@/stores/auth'export default {name: 'PermissionWrapper',props: {// 权限配置permissions: {type: [String, Array, Object],default: null},// 角色配置roles: {type: [String, Array],default: null},// 是否需要所有权限requireAll: {type: Boolean,default: false},// 是否显示降级内容showFallback: {type: Boolean,default: true},// 降级消息fallbackMessage: {type: String,default: '您没有权限访问此内容'},// 异步验证器asyncValidator: {type: Function,default: null},// 验证上下文context: {type: Object,default: () => ({})}},setup(props) {const authStore = useAuthStore()const loading = ref(false)const hasPermission = ref(false)// 权限检查const checkPermissions = async () => {if (!authStore.isAuthenticated) {hasPermission.value = falsereturn}loading.value = truetry {let permissionResult = true// 基础权限检查if (props.permissions) {if (typeof props.permissions === 'string') {permissionResult = permissionManager.hasPermission(authStore.user.id, props.permissions)} else if (Array.isArray(props.permissions)) {if (props.requireAll) {permissionResult = props.permissions.every(permission =>permissionManager.hasPermission(authStore.user.id, permission))} else {permissionResult = props.permissions.some(permission =>permissionManager.hasPermission(authStore.user.id, permission))}}}// 角色检查if (permissionResult && props.roles) {if (typeof props.roles === 'string') {permissionResult = permissionManager.hasRole(authStore.user.id, props.roles)} else if (Array.isArray(props.roles)) {permissionResult = props.roles.some(role =>permissionManager.hasRole(authStore.user.id, role))}}// 异步验证器if (permissionResult && props.asyncValidator) {const validationResult = await props.asyncValidator(authStore.user,props.context)permissionResult = validationResult.allowed !== false}hasPermission.value = permissionResult} catch (error) {console.error('权限验证失败:', error)hasPermission.value = false} finally {loading.value = false}}// 监听权限变化watch(() => [props.permissions, props.roles, props.context, authStore.user],checkPermissions,{ deep: true, immediate: true })return {loading,hasPermission}}
}
</script><style scoped>
.permission-loading {display: flex;align-items: center;gap: 8px;padding: 16px;color: #666;
}.permission-fallback {padding: 16px;
}.no-permission {text-align: center;color: #999;
}.no-permission p {margin: 8px 0 0 0;
}
</style>

🚀 性能优化和最佳实践

权限缓存策略

// 权限缓存管理器
class PermissionCache {constructor() {this.cache = new Map()this.cacheTimeout = 5 * 60 * 1000 // 5分钟缓存this.maxCacheSize = 1000}// 生成缓存键generateKey(userId, permission, context = {}) {const contextStr = JSON.stringify(context)return `${userId}:${permission}:${contextStr}`}// 获取缓存get(userId, permission, context) {const key = this.generateKey(userId, permission, context)const cached = this.cache.get(key)if (!cached) return null// 检查是否过期if (Date.now() - cached.timestamp > this.cacheTimeout) {this.cache.delete(key)return null}return cached.result}// 设置缓存set(userId, permission, context, result) {const key = this.generateKey(userId, permission, context)// 检查缓存大小if (this.cache.size >= this.maxCacheSize) {this.cleanup()}this.cache.set(key, {result,timestamp: Date.now()})}// 清理过期缓存cleanup() {const now = Date.now()const toDelete = []for (const [key, cached] of this.cache) {if (now - cached.timestamp > this.cacheTimeout) {toDelete.push(key)}}toDelete.forEach(key => this.cache.delete(key))// 如果还是太大，删除最旧的一半if (this.cache.size >= this.maxCacheSize) {const entries = Array.from(this.cache.entries())entries.sort((a, b) => a[1].timestamp - b[1].timestamp)const toRemove = entries.slice(0, Math.floor(entries.length / 2))toRemove.forEach(([key]) => this.cache.delete(key))}}// 清空用户缓存clearUserCache(userId) {const toDelete = []for (const key of this.cache.keys()) {if (key.startsWith(`${userId}:`)) {toDelete.push(key)}}toDelete.forEach(key => this.cache.delete(key))}// 清空所有缓存clear() {this.cache.clear()}
}// 带缓存的权限验证器
class CachedPermissionValidator extends DynamicPermissionValidator {constructor(permissionManager) {super(permissionManager)this.cache = new PermissionCache()}async validate(userId, permission, context = {}) {// 尝试从缓存获取const cached = this.cache.get(userId, permission, context)if (cached !== null) {return cached}// 执行验证const result = await super.validate(userId, permission, context)// 缓存结果this.cache.set(userId, permission, context, result)return result}// 清理用户缓存（用户权限变更时调用）invalidateUserCache(userId) {this.cache.clearUserCache(userId)}
}

路由守卫的性能优化

// 优化的路由守卫管理器
class OptimizedRouteGuard {constructor(router, permissionValidator) {this.router = routerthis.validator = permissionValidatorthis.guardCache = new Map()this.setupOptimizedGuards()}setupOptimizedGuards() {// 批量权限检查守卫this.router.beforeEach(async (to, from, next) => {const authStore = useAuthStore()if (!authStore.isAuthenticated) {return next()}// 收集所有需要检查的权限const permissionsToCheck = this.collectPermissions(to)if (permissionsToCheck.length === 0) {return next()}try {// 批量验证权限const results = await this.validator.validateBatch(authStore.user.id,permissionsToCheck,{ route: to })// 检查是否有被拒绝的权限const deniedPermissions = Object.entries(results).filter(([_, result]) => !result.allowed)if (deniedPermissions.length > 0) {return next({name: 'Forbidden',params: { reason: 'insufficient_permission',details: deniedPermissions}})}next()} catch (error) {console.error('权限验证失败:', error)next({ name: 'Error', params: { error } })}})// 预加载守卫优化this.router.beforeEach(async (to, from, next) => {if (to.meta.preload && this.shouldPreload(to, from)) {try {await this.optimizedPreload(to)} catch (error) {console.error('预加载失败:', error)}}next()})}// 收集路由需要的所有权限collectPermissions(route) {const permissions = new Set()// 收集当前路由的权限if (route.meta.permissions) {route.meta.permissions.forEach(p => permissions.add(p))}// 收集父路由的权限route.matched.forEach(record => {if (record.meta.permissions) {record.meta.permissions.forEach(p => permissions.add(p))}})return Array.from(permissions)}// 判断是否需要预加载shouldPreload(to, from) {// 如果是相同路由的参数变化，可能不需要预加载if (to.name === from.name && to.meta.preloadOnParamChange === false) {return false}// 检查预加载缓存const cacheKey = this.getPreloadCacheKey(to)return !this.guardCache.has(cacheKey)}// 优化的预加载async optimizedPreload(route) {const cacheKey = this.getPreloadCacheKey(route)// 检查缓存if (this.guardCache.has(cacheKey)) {return this.guardCache.get(cacheKey)}// 执行预加载const preloadPromise = this.executePreload(route)// 缓存Promise（避免重复请求）this.guardCache.set(cacheKey, preloadPromise)try {const result = await preloadPromise// 缓存结果this.guardCache.set(cacheKey, Promise.resolve(result))return result} catch (error) {// 移除失败的缓存this.guardCache.delete(cacheKey)throw error}}getPreloadCacheKey(route) {return `${route.name}-${JSON.stringify(route.params)}`}async executePreload(route) {const preloadConfig = route.meta.preloadif (typeof preloadConfig === 'function') {return await preloadConfig(route)}if (Array.isArray(preloadConfig)) {return await Promise.all(preloadConfig.map(loader => loader(route)))}return null}// 清理缓存clearCache() {this.guardCache.clear()}
}