当前位置：首页 > VUE

Vue怎么实现权限验证

2026-01-21 05:00:03VUE

Vue权限验证实现方法

路由守卫验证

在router.js中配置全局前置守卫，通过meta字段标记路由权限要求。检查用户权限是否匹配，未匹配则跳转到登录页或403页面。

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()
  }
})

动态路由加载

根据用户权限动态生成可访问路由表。先定义完整路由结构，通过addRoutes方法动态添加符合权限的路由。

// 过滤有权限的路由
function filterAsyncRoutes(routes, roles) {
  return routes.filter(route => {
    if (hasPermission(roles, route)) {
      if (route.children) {
        route.children = filterAsyncRoutes(route.children, roles)
      }
      return true
    }
    return false
  })
}

指令级控制

创建v-permission自定义指令，用于控制按钮/元素的显示隐藏。指令内部比对当前用户权限与要求权限。

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)
    }
  }
})

API请求拦截

在axios拦截器中检查请求权限。未携带token的请求直接拒绝，已过期的token触发刷新或重新登录流程。

service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers['Authorization'] = 'Bearer ' + getToken()
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

权限数据存储

使用Vuex集中管理权限状态。包括用户角色、权限列表等信息，并提供权限校验方法供组件调用。

const store = new Vuex.Store({
  state: {
    roles: [],
    permissions: []
  },
  getters: {
    hasPermission: state => permission => {
      return state.permissions.includes(permission)
    }
  }
})

页面元素控制

在组件内使用计算属性控制界面元素的渲染。结合Vuex中的权限状态进行条件判断。

computed: {
  showEditButton() {
    return this.$store.getters.hasPermission('edit')
  }
}

服务端验证配合

前端验证需与后端配合，确保所有关键操作都经过服务端权限校验。前端路由和按钮控制仅作为用户体验优化。

错误处理

统一处理权限不足的异常情况。捕获403错误码时跳转至无权限提示页面，401错误码时清除本地凭证并重定向到登录页。

Vue怎么实现权限验证

service.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 403) {
      router.push('/403')
    }
    return Promise.reject(error)
  }
)