当前位置：首页 > VUE

使用vue实现权限控制

2026-02-24 21:49:12VUE

基于路由的权限控制

通过路由守卫（beforeEach）结合用户角色动态过滤路由表，仅允许访问有权限的路由。

实现步骤

定义路由元信息
在路由配置中添加 meta 字段标记所需权限角色：

const routes = [
  { path: '/admin', component: AdminPage, meta: { roles: ['admin'] } },
  { path: '/user', component: UserPage, meta: { roles: ['user', 'admin'] } }
];

全局前置守卫校验权限
在 router.beforeEach 中检查用户角色是否匹配路由要求：

router.beforeEach((to, from, next) => {
  const userRoles = store.getters.roles; // 从Vuex或Pinia获取用户角色
  if (to.meta?.roles) {
    if (userRoles.some(role => to.meta.roles.includes(role))) {
      next();
    } else {
      next('/forbidden'); // 跳转到无权限页面
    }
  } else {
    next();
  }
});

动态菜单渲染

根据用户权限过滤导航菜单，仅显示有权限访问的菜单项。

实现步骤

过滤菜单数据
使用计算属性基于用户角色过滤菜单：

computed: {
  filteredMenus() {
    return allMenus.filter(menu => {
      return !menu.meta?.roles || this.userRoles.some(role => menu.meta.roles.includes(role));
    });
  }
}

渲染菜单组件
在模板中遍历过滤后的菜单数据：

<template v-for="menu in filteredMenus">
  <router-link :to="menu.path">{{ menu.title }}</router-link>
</template>

组件级权限控制

使用自定义指令或高阶组件控制按钮/组件的显示。

自定义指令实现

注册指令

Vue.directive('permission', {
  inserted(el, binding, vnode) {
    const { value } = binding;
    const userRoles = vnode.context.$store.getters.roles;
    if (value && !userRoles.some(role => value.includes(role))) {
      el.parentNode?.removeChild(el); // 无权限时移除元素
    }
  }
});

模板中使用

<button v-permission="['admin']">删除</button>

API请求拦截

在Axios拦截器中校验接口权限，防止非法请求。

实现示例

使用vue实现权限控制

axios.interceptors.request.use(config => {
  const requiredRole = config.meta?.role; // 从接口配置获取所需角色
  if (requiredRole && !userRoles.includes(requiredRole)) {
    return Promise.reject(new Error('无权限访问'));
  }
  return config;
});