vue实现页面权限
Vue 实现页面权限的方法
路由守卫控制权限
在 Vue 项目中，可以通过路由守卫（beforeEach）实现页面权限控制。在路由跳转前，检查用户是否有权限访问目标页面。
// router/index.js
router.beforeEach((to, from, next) => {
const userRoles = store.getters.roles // 假设用户角色存储在 Vuex 中
const requiredRoles = to.meta.roles // 路由元信息中定义需要的角色
if (requiredRoles) {
if (userRoles.some(role => requiredRoles.includes(role))) {
next()
} else {
next('/403') // 无权限跳转到403页面
}
} else {
next() // 无需权限直接放行
}
})动态路由生成
根据用户权限动态生成可访问的路由表，限制用户只能看到有权限的菜单。
// 过滤异步路由表
function filterAsyncRoutes(routes, roles) {
const res = []
routes.forEach(route => {
const tmp = { ...route }
if (hasPermission(roles, tmp)) {
if (tmp.children) {
tmp.children = filterAsyncRoutes(tmp.children, roles)
}
res.push(tmp)
}
})
return res
}
// 检查权限
function hasPermission(roles, route) {
if (route.meta && route.meta.roles) {
return roles.some(role => route.meta.roles.includes(role))
} else {
return true
}
}指令控制按钮权限
使用 Vue 自定义指令控制页面中按钮的显示权限。
// main.js
Vue.directive('permission', {
inserted: function(el, binding, vnode) {
const { value } = binding
const roles = store.getters.roles
if (value && value instanceof Array && value.length > 0) {
const hasPermission = roles.some(role => value.includes(role))
if (!hasPermission) {
el.parentNode && el.parentNode.removeChild(el)
}
} else {
throw new Error('需要指定权限数组')
}
}
})
// 使用方式
<button v-permission="['admin']">管理员按钮</button>权限数据管理
将权限数据存储在 Vuex 中，便于全局管理和使用。
// store/modules/permission.js
const state = {
routes: [],
addRoutes: []
}
const mutations = {
SET_ROUTES: (state, routes) => {
state.addRoutes = routes
state.routes = constantRoutes.concat(routes)
}
}
const actions = {
generateRoutes({ commit }, roles) {
return new Promise(resolve => {
let accessedRoutes
if (roles.includes('admin')) {
accessedRoutes = asyncRoutes
} else {
accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
}
commit('SET_ROUTES', accessedRoutes)
resolve(accessedRoutes)
})
}
}服务端权限验证
前端权限控制只是辅助，真正的权限验证应该在服务端完成。每次请求时，服务端应验证用户是否有权限执行该操作。
// API 请求拦截器
service.interceptors.request.use(
config => {
const token = store.getters.token
if (token) {
config.headers['Authorization'] = 'Bearer ' + token
}
return config
},
error => {
return Promise.reject(error)
}
)通过以上方法的组合使用，可以实现完整的 Vue 页面权限控制体系，既保证了安全性，又提供了良好的用户体验。
