vue怎么实现权限
Vue 权限实现方法
路由权限控制
使用 vue-router 的 beforeEach 钩子进行路由拦截，结合用户角色或权限列表过滤可访问路由。
router.beforeEach((to, from, next) => {
const hasPermission = checkUserPermission(to.meta.requiresAuth)
if (to.meta.requiresAuth && !hasPermission) {
next('/login')
} else {
next()
}
})动态路由添加
根据用户权限动态生成路由表，通过 router.addRoutes 添加可访问路由。
// 过滤有权限的路由
const accessedRoutes = asyncRoutes.filter(route => {
return hasPermission(route.meta.roles)
})
router.addRoutes(accessedRoutes)指令式权限控制
创建自定义指令 v-permission，用于控制页面元素的显示隐藏。
Vue.directive('permission', {
inserted(el, binding) {
if (!checkPermission(binding.value)) {
el.parentNode && el.parentNode.removeChild(el)
}
}
})全局权限校验方法
在 Vue 原型上挂载权限校验方法，方便组件内调用。
Vue.prototype.$_has = function(permission) {
return this.$store.state.user.permissions.includes(permission)
}状态管理集成
使用 Vuex 存储用户权限信息，保持权限状态全局可访问。
const store = new Vuex.Store({
state: {
permissions: []
},
mutations: {
SET_PERMISSIONS(state, permissions) {
state.permissions = permissions
}
}
})后端配合方案
前端存储权限标识，实际权限校验应由后端接口二次验证，防止前端篡改。
// API 请求拦截器
axios.interceptors.response.use(response => {
if (response.data.code === 403) {
router.push('/403')
}
return response
})
