vue实现权限
Vue 实现权限控制的方法
路由权限控制
在Vue项目中，路由权限控制是常见的权限管理方式。通过动态生成路由表或路由守卫拦截实现权限控制。
// 路由守卫示例
router.beforeEach((to, from, next) => {
const hasPermission = checkUserPermission(to.meta.requiresAuth)
if (to.meta.requiresAuth && !hasPermission) {
next('/login')
} else {
next()
}
})动态菜单生成
根据用户权限动态生成可访问的菜单列表，通常与后端配合实现。
// 过滤有权限的菜单
function filterAsyncRoutes(routes, roles) {
return routes.filter(route => {
if (hasPermission(roles, route)) {
if (route.children) {
route.children = filterAsyncRoutes(route.children, roles)
}
return true
}
return false
})
}组件级权限控制
通过自定义指令或组件封装实现细粒度的组件权限控制。
// 自定义权限指令
Vue.directive('permission', {
inserted: function(el, binding) {
if (!checkPermission(binding.value)) {
el.parentNode.removeChild(el)
}
}
})API请求权限控制
在请求拦截器中加入权限验证，防止无权限用户通过直接调用API获取数据。
// axios拦截器示例
service.interceptors.request.use(
config => {
if (store.getters.token) {
config.headers['X-Token'] = getToken()
}
return config
},
error => {
return Promise.reject(error)
}
)权限数据存储
合理设计Vuex中的权限数据存储结构，便于权限验证和更新。
// Vuex权限模块示例
const permission = {
state: {
routes: [],
addRoutes: []
},
mutations: {
SET_ROUTES: (state, routes) => {
state.addRoutes = routes
state.routes = constantRoutes.concat(routes)
}
}
}按钮级权限控制
通过封装权限按钮组件或混入方式实现按钮显示/隐藏控制。
// 权限按钮组件示例
Vue.component('permission-button', {
props: ['permission'],
render(h) {
if (checkPermission(this.permission)) {
return this.$slots.default[0]
}
return h('span')
}
})权限验证工具函数
封装通用的权限验证函数，便于在多个地方复用。
// 权限验证函数
export function checkPermission(permission) {
const currentPermissions = store.getters.permissions
return currentPermissions.includes(permission)
}实现完善的权限系统需要考虑前后端配合，前端主要负责权限的展示控制，真正的权限验证应在后端完成。权限数据应定期验证更新，确保安全性。
