vue中实现权限控制
路由权限控制
通过路由守卫实现页面级别的权限控制，在router.beforeEach中校验用户权限。定义路由时添加meta字段标记所需权限：
const routes = [
{
path: '/admin',
component: AdminPanel,
meta: { requiresAuth: true, roles: ['admin'] }
}
]
router.beforeEach((to, from, next) => {
const userRoles = store.getters.roles // 从Vuex获取用户角色
if (to.meta.requiresAuth && !userRoles) {
next('/login')
} else if (to.meta.roles && !to.meta.roles.some(role => userRoles.includes(role))) {
next('/403') // 无权限页面
} else {
next()
}
})组件级权限控制
创建自定义指令v-permission实现组件粒度的权限控制：
Vue.directive('permission', {
inserted(el, binding, vnode) {
const { value } = binding
const roles = vnode.context.$store.getters.roles
if (value && Array.isArray(value) && value.length > 0) {
const hasPermission = roles.some(role => value.includes(role))
if (!hasPermission) {
el.parentNode && el.parentNode.removeChild(el)
}
} else {
throw new Error(`需要指定权限数组，如 v-permission="['admin']"`)
}
}
})使用方式：
<button v-permission="['admin']">删除</button>API请求权限控制
在axios拦截器中添加权限验证：
axios.interceptors.request.use(config => {
const token = store.getters.token
if (token) {
config.headers['Authorization'] = `Bearer ${token}`
}
return config
})
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 403) {
router.push('/403')
}
return Promise.reject(error)
}
)动态菜单生成
根据用户权限过滤导航菜单：
computed: {
accessibleRoutes() {
return this.allRoutes.filter(route => {
if (!route.meta || !route.meta.roles) return true
return route.meta.roles.some(role => this.userRoles.includes(role))
})
}
}权限数据管理
使用Vuex集中管理权限状态：
const store = new Vuex.Store({
state: {
roles: [],
permissions: []
},
mutations: {
SET_PERMISSIONS(state, payload) {
state.roles = payload.roles
state.permissions = payload.permissions
}
},
actions: {
async fetchPermissions({ commit }) {
const res = await api.getUserPermissions()
commit('SET_PERMISSIONS', res.data)
}
}
})按钮级权限控制
通过方法判断是否显示操作按钮：
methods: {
checkPermission(requiredPermission) {
return this.$store.getters.permissions.includes(requiredPermission)
}
}模板中使用：
<button v-if="checkPermission('user:delete')">删除用户</button>
