vue实现路由权限控制
Vue 路由权限控制实现方法
路由权限控制在 Vue 项目中通常通过以下几种方式实现：
路由守卫（全局/局部）
在 router/index.js 中定义全局前置守卫，通过 to.meta.requiresAuth 判断是否需要登录：
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})动态路由表
根据用户权限动态生成路由表，结合 router.addRoutes（Vue Router 3.x）或 router.addRoute（Vue Router 4.x）：
// 获取用户权限后过滤路由
const asyncRoutes = filterAsyncRoutes(router.options.routes, userRoles)
router.addRoutes(asyncRoutes)
function filterAsyncRoutes(routes, roles) {
return routes.filter(route => {
if (route.meta && route.meta.roles) {
return roles.some(role => route.meta.roles.includes(role))
}
return true
})
}权限指令
自定义指令控制页面元素显示：
Vue.directive('permission', {
inserted(el, binding) {
const { value } = binding
const permissions = store.getters.permissions
if (!permissions.includes(value)) {
el.parentNode.removeChild(el)
}
}
})使用方式：<button v-permission="'user:add'">添加</button>
服务端返回权限
前端请求接口获取权限数据后存储到 Vuex/Pinia：
// 接口返回数据结构示例
{
"roles": ["admin"],
"permissions": ["user:add", "user:edit"]
}
// 在store中保存权限
state: {
permissions: []
},
mutations: {
SET_PERMISSIONS(state, permissions) {
state.permissions = permissions
}
}404 页面处理
未匹配路由时重定向到404页面：
const router = new VueRouter({
routes: [
// ...其他路由
{ path: '*', redirect: '/404' }
]
})注意事项
- 权限数据建议持久化存储（如 localStorage）
- 敏感路由需在后端进行二次验证
- 动态路由添加后可能需要处理刷新白屏问题
- Vue Router 4.x 使用
router.addRoute()而非addRoutes
以上方法可单独使用或组合使用，具体选择取决于项目复杂度和安全要求。
