vue权限控制实现
vue权限控制实现方法
路由权限控制
通过路由守卫进行权限验证，在路由配置中添加meta字段标记权限标识。
// router.js
const routes = [
{
path: '/admin',
component: Admin,
meta: { requiresAuth: true, roles: ['admin'] }
}
]
router.beforeEach((to, from, next) => {
const hasToken = localStorage.getItem('token')
const userRoles = getUserRoles() // 获取用户角色
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!hasToken) {
next('/login')
} else if (to.meta.roles && !to.meta.roles.some(role => userRoles.includes(role))) {
next('/403') // 无权限页面
} else {
next()
}
} else {
next()
}
})按钮级权限控制
使用自定义指令v-permission控制按钮显示。
// main.js
Vue.directive('permission', {
inserted: function (el, binding) {
const permissions = store.getters.permissions
if (!permissions.includes(binding.value)) {
el.parentNode.removeChild(el)
}
}
})
// 组件中使用
<button v-permission="'user:add'">添加用户</button>动态菜单生成
根据用户权限过滤路由生成菜单。
// 过滤异步路由
function filterAsyncRoutes(routes, roles) {
return routes.filter(route => {
if (route.meta && route.meta.roles) {
return roles.some(role => route.meta.roles.includes(role))
} else {
return true
}
})
}API请求拦截
在axios拦截器中添加权限验证。
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers['Authorization'] = 'Bearer ' + token
}
return config
}, error => {
return Promise.reject(error)
})状态管理集成
使用Vuex集中管理权限状态。
// store.js
const store = new Vuex.Store({
state: {
permissions: []
},
mutations: {
SET_PERMISSIONS(state, permissions) {
state.permissions = permissions
}
},
actions: {
async getPermissions({ commit }) {
const res = await api.getPermissions()
commit('SET_PERMISSIONS', res.data)
}
}
})权限数据格式
建议的权限数据结构。
{
"roles": ["admin", "editor"],
"permissions": [
"user:add",
"user:edit",
"article:delete"
]
}实现时需要注意权限数据应通过后端返回，前端仅做展示和控制，实际权限验证应在后端完成。权限变更后需要刷新页面或重新获取权限数据。
