vue实现权限
Vue 权限实现方案
权限控制在 Vue 项目中通常分为前端路由权限和页面元素权限两部分。以下是常见的实现方式：
路由权限控制
通过路由守卫实现页面访问权限，未授权用户无法访问特定路由。
// router.js
router.beforeEach((to, from, next) => {
const hasToken = localStorage.getItem('token')
const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
if (requiresAuth && !hasToken) {
next('/login')
} else {
next()
}
})动态路由添加
根据用户权限动态生成可访问路由表，通常在后端返回权限数据后处理。
// 假设后端返回的权限数据格式
const asyncRoutes = [
{
path: '/admin',
component: Layout,
meta: { role: 'admin' }
}
]
// 过滤路由
function filterRoutes(routes, roles) {
return routes.filter(route => {
if (route.meta && route.meta.role) {
return roles.includes(route.meta.role)
}
return true
})
}
// 添加路由
const accessedRoutes = filterRoutes(asyncRoutes, ['admin'])
router.addRoutes(accessedRoutes)指令式权限控制
创建自定义指令控制页面元素的显示/隐藏。
// main.js
Vue.directive('permission', {
inserted(el, binding) {
const { value } = binding
const permissions = store.getters.permissions
if (value && !permissions.includes(value)) {
el.parentNode && el.parentNode.removeChild(el)
}
}
})
// 使用方式
<button v-permission="'user:create'">创建用户</button>权限数据存储
使用 Vuex 集中管理权限状态，确保全局访问。
// store/modules/permission.js
const state = {
routes: [],
addRoutes: []
}
const mutations = {
SET_ROUTES: (state, routes) => {
state.addRoutes = routes
state.routes = constantRoutes.concat(routes)
}
}按钮级权限
通过混入(mixin)或工具函数实现按钮级别的权限判断。
// utils/permission.js
export function checkPermission(permission) {
const permissions = store.getters.permissions
return permissions.includes(permission)
}
// 组件中使用
import { checkPermission } from '@/utils/permission'
export default {
methods: {
handleEdit() {
if (!checkPermission('user:edit')) {
this.$message.error('无权限操作')
return
}
// 业务逻辑
}
}
}权限数据初始化
在用户登录后获取权限数据并初始化。
// 登录成功后
login().then(res => {
const { token, permissions } = res.data
localStorage.setItem('token', token)
store.dispatch('GenerateRoutes', permissions)
})以上方案可根据项目需求组合使用，建议将权限逻辑封装为独立模块便于维护。对于复杂系统，可考虑结合后端返回的权限树实现更精细的控制。
