在vue项目中如何实现权限控制，菜单权限，按钮权限，接口权限，路由权限，操作权限，数据权限如何实现

🕗 发布于 2024-11-10 18:18 vue.js 前端 javascript

在实际项目开发中，权限管理是一个关键功能，用于控制不同用户对系统资源的访问。权限是对特定资源的访问许可，权限控制的目的是确保用户只能访问到被分配的资源。例如，网站管理员可以对网站数据进行增删改查，而普通用户只能浏览。

权限管理的分类

根据功能的不同，权限控制可以分为以下几类：

菜单权限

菜单管理涉及定义和管理应用中的导航菜单。不同的用户角色可能会看到不同的菜单项，从而访问不同的功能模块。

路由权限

路由权限控制用户可以访问的页面和路径。

按钮权限

不同的用户角色可能享有不同的操作权限，例如管理员可以增删改查，而普通用户只能查看。

接口权限

接口权限通常采用 JWT 形式进行验证。如果请求未通过验证，服务器会返回 401 状态码，客户端则跳转到登录页面重新登录。登录成功后，客户端会拿到 token 并将其存储起来，通过 axios 请求拦截器在每次请求时携带 token。

权限管理的实现方案

菜单权限控制

菜单权限可以通过以下两种方案实现：

方案一：菜单与路由分离

前端定义路由信息：

{
  name: "login",
  path: "/login",
  component: () => import("@/pages/Login.vue")
}

全局路由守卫：

function hasPermission(router, accessMenu) {
  if (whiteList.includes(router.path)) {
    return true;
  }
  const menu = Util.getMenuByName(router.name, accessMenu);
  return !!menu.name;
}

Router.beforeEach(async (to, from, next) => {
  if (getToken()) {
    const userInfo = store.state.user.userInfo;
    if (!userInfo.name) {
      try {
        await store.dispatch("GetUserInfo"); // 获取用户信息
        await store.dispatch('updateAccessMenu'); // 更新访问菜单
        if (to.path === '/login') {
          next({ name: 'home_index' }); // 如果当前路径是登录页，跳转到首页
        } else {
          next({ ...to, replace: true }); // 替换当前路径
        }
      } catch (e) {
        if (whiteList.includes(to.path)) {
          next(); // 如果路径在白名单中，直接通过
        } else {
          next('/login'); // 否则跳转到登录页
        }
      }
    } else {
      if (to.path === '/login') {
        next({ name: 'home_index' }); // 如果当前路径是登录页，跳转到首页
      } else {
        if (hasPermission(to, store.getters.accessMenu)) {
          Util.toDefaultPage(store.getters.accessMenu, to, routes, next); // 跳转到默认页面
        } else {
          next({ path: '/403', replace: true }); // 没有权限，跳转到403页面
        }
      }
    }
  } else {
    if (whiteList.includes(to.path)) {
      next(); // 如果路径在白名单中，直接通过
    } else {
      next('/login'); // 否则跳转到登录页
    }
  }
  const menu = Util.getMenuByName(to.name, store.getters.accessMenu);
  Util.title(menu.title); // 设置页面标题
});

Router.afterEach((to) => {
  window.scrollTo(0, 0); // 滚动条回到顶部
});

优点：

前后端职责分明，前端负责路由定义，后端负责菜单管理。

缺点：

需要维护菜单与路由的对应关系，增加了复杂性。
每次路由跳转都需要进行权限判断。

方案二：菜单和路由都由后端返回

前端统一定义路由组件：

const Home = () => import("../pages/Home.vue");
const UserInfo = () => import("../pages/UserInfo.vue");
export default {
  home: Home,
  userInfo: UserInfo
};

后端返回路由组件：

[
  {
    name: "home",
    path: "/",
    component: "home"
  },
  {
    name: "userinfo",
    path: "/userinfo",
    component: "userInfo"
  }
]

优点：

前后端高度集成，灵活性高。

缺点：

前后端配合要求更高。
每次路由跳转都需要进行权限判断。

路由权限控制

方案一：初始化即挂载全部路由

路由定义：

const routerMap = [
  {
    path: '/permission',
    component: Layout,
    redirect: '/permission/index',
    alwaysShow: true,
    meta: {
      title: '权限管理',
      icon: 'lock',
      roles: ['admin', 'editor'] // 标记权限
    },
    children: [
      {
        path: 'page',
        component: () => import('@/views/permission/page'),
        name: 'pagePermission',
        meta: {
          title: '页面权限',
          roles: ['admin'] // 标记权限
        }
      },
      {
        path: 'directive',
        component: () => import('@/views/permission/directive'),
        name: 'directivePermission',
        meta: {
          title: '指令权限'
          // 如果没有设置权限标识，意味着这个页面不需要权限
        }
      }
    ]
  }
];

优点：

简单直观，易于实现。

缺点：

加载所有路由，对性能有影响。
每次路由跳转都需要进行权限判断。
菜单写死在前端，修改显示文字或权限信息需要重新编译。
菜单与路由耦合，定义路由时需要添加菜单显示标题、图标等信息。

方案二：按需挂载路由

初始化挂载不需要权限控制的路由：

import router from './router';
import store from './store';
import { Message } from 'element-ui';
import NProgress from 'nprogress'; // 进度条
import 'nprogress/nprogress.css'; // 进度条样式
import { getToken } from '@/utils/auth'; // 从 cookie 获取 token

NProgress.configure({ showSpinner: false }); // 配置进度条

function hasPermission(roles, permissionRoles) {
  if (roles.includes('admin')) return true; // 管理员权限直接通过
  if (!permissionRoles) return true;
  return roles.some(role => permissionRoles.includes(role));
}

const whiteList = ['/login', '/authredirect']; // 不需要重定向的白名单

router.beforeEach((to, from, next) => {
  NProgress.start(); // 开始进度条
  if (getToken()) { // 确定是否有 token
    if (to.path === '/login') {
      next({ path: '/' });
      NProgress.done(); // 如果当前页面是仪表盘，不会触发 afterEach 钩子，所以手动处理
    } else {
      if (store.getters.roles.length === 0) { // 用户信息
        store.dispatch('GetUserInfo').then(res => { // 获取用户信息
          const roles = res.data.roles; // 注意：角色必须是一个数组！例如：['editor','develop']
          store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成路由
            router.addRoutes(store.getters.addRouters); // 添加路由
            next({ ...to, replace: true }); // 替换当前路径，防止留下历史记录
          });
        }).catch((err) => {
          store.dispatch('FedLogOut').then(() => {
            Message.error(err || '验证失败，请重新登录');
            next({ path: '/' });
          });
        });
      } else {
        if (hasPermission(store.getters.roles, to.meta.roles)) {
          next(); // 有权限，继续跳转
        } else {
          next({ path: '/401', replace: true, query: { noGoBack: true }}); // 没有权限，跳转到401页面
        }
      }
    }
  } else {
    if (whiteList.includes(to.path)) {
      next(); // 如果路径在白名单中，直接通过
    } else {
      next('/login'); // 否则跳转到登录页
      NProgress.done(); // 如果当前页面是登录页，不会触发 afterEach 钩子，所以手动处理
    }
  }
});

router.afterEach(() => {
  NProgress.done(); // 结束进度条
});

优点：

按需加载路由，提升性能。
灵活性高，适合复杂的权限管理需求。

缺点：

每次路由跳转都需要进行权限判断。
菜单信息写死在前端，修改显示文字或权限信息需要重新编译。
菜单与路由耦合，定义路由时需要添加菜单显示标题、图标等信息。

按钮权限

方案一：使用 `v-if` 判断

优点：
- 简单直观，易于实现。
缺点：
- 如果页面较多，每个页面都需要获取用户权限并进行判断，增加复杂性。

方案二：通过自定义指令进行按钮权限判断

配置路由：

{
  path: '/permission',
  component: Layout,
  name: ' ',
  meta: {
    btnPermissions: ['admin', 'supper', 'normal']
  },
  children: [
    {
      path: 'supper',
      component: _import('system/supper'),
      name: ' ',
      meta: {
        btnPermissions: ['admin', 'supper']
      }
    },
    {
      path: 'normal',
      component: _import('system/normal'),
      name: ' ',
      meta: {
        btnPermissions: ['admin']
      }
    }
  ]
}

自定义权限鉴定指令：

import Vue from 'vue';

const has = Vue.directive('has', {
  bind: function (el, binding, vnode) {
    let btnPermissionsArr = binding.value ? [binding.value] : vnode.context.$route.meta.btnPermissions;
    if (!Vue.prototype.$_has(btnPermissionsArr)) {
      el.parentNode.removeChild(el); // 移除元素
    }
  }
});

Vue.prototype.$_has = function (value) {
  const btnPermissionsStr = sessionStorage.getItem("btnPermissions");
  if (!btnPermissionsStr) {
    return false;
  }
  return value.includes(btnPermissionsStr);
};

export { has };

使用自定义指令：
```
<el-button @click='editClick' type="primary" v-has>编辑</el-button>
```
优点：
- 代码简洁，易于维护。
缺点：
- 需要维护按钮权限信息。

接口权限

接口权限通常采用 JWT 形式进行验证。如果请求未通过验证，服务器会返回 401 状态码，客户端则跳转到登录页面重新登录。登录成功后，客户端会拿到 token 并将其存储起来，通过 axios 请求拦截器在每次请求时携带 token。

axios.interceptors.request.use(config => {
  config.headers['Authorization'] = `Bearer ${cookie.get('token')}`; // 在请求头中携带 token
  return config;
});

总结

权限管理是项目开发中不可或缺的一部分，合理的权限控制可以提升系统的安全性。通过上述方案，可以根据项目的具体需求选择合适的权限管理方式。

原文地址：https://blog.csdn.net/misstianyun/article/details/143584187

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：Python数据分析案例64——杭帮菜美食探索数据分析可视化
下一篇：前后端交互接口（一）

[CUDA] cuda kernel开发记录
包括kernel的一些使用注意事项， launch_bound, __device__, debug排查技巧
阅读更多2024-11-16
【python】掌握 Flask：轻量级 Web 开发框架解析
路由是 Web 开发的基础，负责管理 URL 到视图函数的映射。在 Flask 中，路由定义非常简单，只需使用装饰器即可。这个代码段定义了一个路由，访问该路径时会返回 “Hello, Flask!通过
阅读更多2024-11-16
AI图片分析接口LiteAIServer摄像机实时接入分析平台未戴安全帽检测算法
随着人工智能技术的飞速发展，摄像机实时接入分析平台LiteAIServer工地未佩戴安全帽检测算法应运而生，为工地安全管理带来了革命性的变革。
阅读更多2024-11-16
2024新版pycharm如何切换anaconda虚拟环境
回归正题，导入项目后点击文件=>设置，找到解释器。不得不说这界面改的真不错，看着很舒服。另外在终端用指令切换也是可以的。添加解释器=>添加本地解释器。
阅读更多2024-11-16
计算机提示mfc140u.dll丢失的五种解决方法，了解mfc140u.dll错误的几种修复方法
当你尝试打开某些程序时，突然出现错误提示，告知你系统缺少 mfc140u.dll 文件，这可能让你感到困惑和无助。mfc140u.dll 是 Microsoft Foundation Class (M
阅读更多2024-11-16
k8s 中传递参数给docker容器
在 Kubernetes 中，可以通过多种方式将参数传递给 Dockerfile 或其运行的容器，常见的方式包括使用环境变量、命令行参数、配置文件等。
阅读更多2024-11-16
设计模式之工厂模式，但是宝可梦
作为一个细分了三个种类的设计模式，到底该如何取舍？比起直接new一个对象，使用对应模式的好处到底在哪？简单工厂模式：根据传入的参数决定产出的对象，可以隐藏一些创建的细节适用于需要根据条件创建不同对象的
阅读更多2024-11-16
【深度学习】wsl-ubuntu深度学习基本配置
这里注意一点，你换了源之后就最好不要开代理了，要不然搞不好下载失败，pip和conda都是。
阅读更多2024-11-16
nodejs和npm在gitbash中提示Not Found情况的解决办法
很多小伙伴学习了node以后，在cmd命令行中可以正常的获取node版本和npm版本，但是我们经常使用gitbash来管理git，这时候下载完gitbash后，在gitbash中输入node -v和n
阅读更多2024-11-16
判断子序列
给定一个长度为 n的整数序列 a1,a2,…,an以及一个长度为 m的整数序列 b1,b2,…,bm。请你判断 a序列是否为 b序列的子序列。子序列指序列的一部分项按原有次序排列而得的序列，例如序列
阅读更多2024-11-16

在vue项目中如何实现权限控制，菜单权限，按钮权限，接口权限，路由权限，操作权限，数据权限如何实现

权限管理的分类

菜单权限

路由权限

按钮权限

接口权限

权限管理的实现方案

菜单权限控制

方案一：菜单与路由分离

方案二：菜单和路由都由后端返回

路由权限控制

方案一：初始化即挂载全部路由

方案二：按需挂载路由

按钮权限

方案一：使用 v-if 判断

方案二：通过自定义指令进行按钮权限判断

接口权限

总结

相关文章

方案一：使用 `v-if` 判断