vue前端实现权限
Vue 前端权限实现方案
路由权限控制
通过 Vue Router 的 beforeEach 钩子实现路由拦截，结合用户角色和权限列表进行校验。在路由配置中添加 meta 字段定义所需权限：
const routes = [
{
path: '/admin',
component: AdminPanel,
meta: { requiresAuth: true, roles: ['admin'] }
}
]动态菜单生成
根据用户权限动态生成可访问的路由菜单。通过过滤路由表或后端返回的菜单结构实现：
const allowedRoutes = routes.filter(route => {
return userRoles.some(role => route.meta.roles.includes(role))
})指令级权限控制
创建 v-permission 自定义指令，用于控制按钮/元素的显示：
Vue.directive('permission', {
inserted(el, binding) {
if (!checkPermission(binding.value)) {
el.parentNode.removeChild(el)
}
}
})API 请求拦截
在 axios 拦截器中验证请求权限，无权限时取消请求或提示错误：
axios.interceptors.request.use(config => {
if (!hasApiPermission(config.url)) {
return Promise.reject(new Error('无访问权限'))
}
return config
})权限数据管理
使用 Vuex 集中管理权限状态，包含用户角色、权限点等数据：
const store = new Vuex.Store({
state: {
roles: [],
permissions: []
},
mutations: {
SET_PERMISSIONS(state, payload) {
state.permissions = payload
}
}
})组件级权限控制
通过高阶组件或 mixin 实现组件按权限显示：
const withPermission = (WrappedComponent, permission) => {
return {
render(h) {
return checkPermission(permission)
? h(WrappedComponent)
: h('div', '无权限查看')
}
}
}权限更新机制
监听权限变化事件，实时更新界面权限状态：
window.addEventListener('permission-change', () => {
store.dispatch('refreshPermissions')
})实现要点
- 保持前后端权限校验一致
- 敏感操作需后端二次验证
- 权限数据应加密存储
- 默认采用最小权限原则
- 定期清理无效权限缓存
