vue实现前端权限
Vue 前端权限实现方案
基于路由的权限控制
通过路由守卫（router.beforeEach）实现动态路由过滤，结合用户角色或权限列表控制可访问的路由。
// 路由配置示例
const routes = [
{ path: '/admin', component: Admin, meta: { requiresAuth: true, roles: ['admin'] }},
{ path: '/user', component: User, meta: { requiresAuth: true }}
]
// 路由守卫逻辑
router.beforeEach((to, from, next) => {
const userRoles = store.getters.roles
if (to.meta.roles && !to.meta.roles.some(role => userRoles.includes(role))) {
next('/forbidden')
} else {
next()
}
})组件级权限控制
使用自定义指令v-permission实现按钮/组件级别的权限控制。
// 注册全局指令
Vue.directive('permission', {
inserted(el, binding, vnode) {
const { value } = binding
const permissions = store.getters.permissions
if (value && !permissions.includes(value)) {
el.parentNode && el.parentNode.removeChild(el)
}
}
})
// 模板中使用
<button v-permission="'user:delete'">删除用户</button>权限数据管理
使用Vuex存储用户权限信息，保持状态集中管理。
// Vuex store示例
const store = new Vuex.Store({
state: {
permissions: [],
roles: []
},
mutations: {
SET_PERMISSIONS(state, permissions) {
state.permissions = permissions
}
},
actions: {
async fetchPermissions({ commit }) {
const res = await api.getPermissions()
commit('SET_PERMISSIONS', res.data)
}
}
})动态菜单渲染
根据权限数据动态生成导航菜单，过滤无权限的菜单项。
// 菜单过滤方法
function filterMenus(menus, permissions) {
return menus.filter(menu => {
if (menu.children) {
menu.children = filterMenus(menu.children, permissions)
}
return !menu.meta?.permission || permissions.includes(menu.meta.permission)
})
}API请求拦截
在axios拦截器中添加权限验证，拦截无权限的请求。
// 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('/forbidden')
}
return Promise.reject(error)
}
)权限初始化流程
应用启动时获取用户权限信息并初始化权限系统。
// 应用入口文件
async function initApp() {
await store.dispatch('user/getInfo')
await store.dispatch('permission/generateRoutes')
router.addRoutes(store.getters.addRouters)
new Vue({ router, store }).$mount('#app')
}注意事项
- 前端权限控制需与后端验证配合使用，不能替代后端权限验证
- 敏感操作必须通过后端API进行二次验证
- 权限数据建议加密存储或通过HTTP Only Cookie保护
- 动态路由方案需考虑路由缓存和页面刷新问题
以上方案可根据实际项目需求进行组合或调整，建议采用RBAC（基于角色的访问控制）模型设计权限系统。
