vue实现路由权限控制
Vue 路由权限控制实现方法
路由守卫全局控制
在 router/index.js 中通过 beforeEach 钩子进行全局拦截。从本地存储（如 localStorage）获取用户权限信息，与路由元信息 meta.requiresAuth 进行匹配。
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
if (requiresAuth && !isAuthenticated) {
next('/login')
} else if (to.path === '/login' && isAuthenticated) {
next('/dashboard')
} else {
next()
}
})动态路由表生成
根据用户角色动态生成可访问路由表。先定义基础路由（如登录页），登录后通过 addRoutes 添加权限路由。
// 权限路由配置
const adminRoutes = [...]
const userRoutes = [...]
// 动态添加路由
function generateRoutes(role) {
const accessRoutes = role === 'admin' ? adminRoutes : userRoutes
router.addRoutes(accessRoutes)
}路由元信息控制
在路由配置中使用 meta 字段标记权限要求，结合 v-permission 自定义指令控制界面元素显示。
{
path: '/admin',
component: AdminPanel,
meta: {
requiresAuth: true,
roles: ['admin']
}
}服务端控制方案
前端传递 token 到服务端，服务端返回用户权限路由表。需配合 JWT 等认证方案实现。
axios.get('/api/user-routes').then(res => {
const accessedRoutes = res.data
router.addRoutes(accessedRoutes)
})按钮级权限控制
通过自定义指令实现按钮粒度的权限控制，在指令中校验用户权限码。
Vue.directive('permission', {
inserted(el, binding) {
const hasPermission = checkPermission(binding.value)
if (!hasPermission) el.parentNode.removeChild(el)
}
})权限数据持久化
使用 Vuex 集中管理权限状态，结合 localStorage 实现刷新后权限不丢失。
// store/modules/permission.js
state: {
routes: [],
addRoutes: []
},
mutations: {
SET_ROUTES(state, routes) {
state.addRoutes = routes
state.routes = constantRoutes.concat(routes)
}
}404页面处理
动态路由添加后需在最后捕获未匹配路由，避免刷新页面时出现 404。
{
path: '*',
redirect: '/404',
hidden: true
}注意事项
- 路由配置应拆分基础路由和权限路由
- 动态添加路由需考虑页面刷新场景
- 按钮权限与路由权限应保持一致
- 敏感路由需服务端二次验证
- 权限变更后需及时清理旧路由
