vue权限管理解决方案

在这里插入图片描述

一. 什么是权限管理

权限控制是确保用户只能访问其被授权的资源和执行其被授权的操作的重要方面。而前端权限归根结底是请求的发起权，请求的发起可能有下面两种形式触发

  • 页面加载触发
  • 页面上的按钮点击触发

总体而言，权限控制可以从前端路由和视图两个方面入手，以确保对触发权限的源头进行有效的控制。最终目标是确保用户在整个应用程序中的访问和操作都受到适当的权限限制，从而保护敏感数据和功能：

  • 路由方面，用户登录后只能看到自己有权访问的导航菜单，也只能访问自己有权访问的路由地址，否则将跳转 4xx 提示页
  • 视图方面，用户只能看到自己有权浏览的内容和有权操作的控件
  • 最后再加上请求控制作为最后一道防线，路由可能配置失误，按钮可能忘了加权限，这种时候请求控制可以用来兜底，越权请求将在前端被拦截

二、如何实现权限管理

前端权限控制通常涉及以下四个方面：

  1. 数据权限控制：

    • 控制用户能够查看或操作的数据范围。例如，在表格中只显示用户有权限查看的数据，或者在数据提交时验证用户是否有权限进行修改。

  3. 按钮/操作权限控制：

    • 控制用户在页面上能否执行某些操作，例如按钮的点击、表单的提交等。这通常需要在页面渲染时根据用户权限动态显示或隐藏相应的按钮或操作元素。

  5. 路由权限控制：

    • 控制用户能否访问特定页面或路由。这涉及到在路由跳转之前进行权限判断，确保用户只能访问其有权限的页面。

  7. 菜单权限控制：

    • 控制用户在系统菜单中能够看到和访问哪些菜单项。这确保用户只能看到其有权限访问的功能模块。

这四个方面的权限控制通常需要配合后端进行，因为前端的权限控制只是一种辅助手段，真正的权限验证和控制应该在后端进行。前端的权限控制主要是为了提升用户体验，使用户在界面上只看到和能够操作其有权限的内容。在实现这些权限控制时，通常会使用一些全局路由守卫、指令、状态管理等技术手段。

接口权限

接口权限目前一般采用jwt的形式来验证，没有通过的话一般返回401，跳转到登录页面重新进行登录。 登录完拿到token，将token存起来，通过axios请求拦截器进行拦截，每次请求的时候头部携带token。

// Axios请求拦截器
axios.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

路由权限控制

  1. 方案一

    初始化即挂载全部路由，并且在路由上标记相应的权限信息，每次路由跳转前做校验

    import { RouteRecordRaw } from 'vue-router';

const routerMap: RouteRecordRaw[] = [
  {
    path: '/permission',
    component: () => import('@/layouts/Layout.vue'),
    redirect: '/permission/index',
    children: [
      {
        path: 'index',
        component: () => import('@/views/permission/index.vue'),
        name: 'Permission',
        meta: {
          title: 'permission',
          icon: 'lock',
          roles: ['admin', 'editor'], // you can set roles in root nav
          alwaysShow: true, // will always show the root menu
        },
      },
      {
        path: 'page',
        component: () => import('@/views/permission/page.vue'),
        name: 'PagePermission',
        meta: {
          title: 'pagePermission',
          roles: ['admin'], // or you can only set roles in sub nav
        },
      },
      {
        path: 'directive',
        component: () => import('@/views/permission/directive.vue'),
        name: 'DirectivePermission',
        meta: {
          title: 'directivePermission',
          // if do not set roles, means: this page does not require permission
        },
      },
    ],
  },
];
export default routerMap;

    这种方式存在以下四种缺点：

    • 性能开销： 如果应用中有大量的路由和权限信息，一次性加载所有路由可能导致初始加载时的性能开销较大，影响应用的启动速度。
    • 安全性： 在前端进行的权限校验可以被绕过，因为前端代码是可见和可修改的。真正的安全性应该在后端进行验证，前端的权限控制主要是为了提升用户体验而非安全性。
    • 维护成本： 随着应用的扩展，维护所有路由和权限信息可能变得复杂。新增、删除或修改路由需要在前端进行手动更新，可能导致潜在的人为错误。
    • 资源浪费： 如果某些页面很少被访问，一次性加载所有路由可能会浪费一些资源，因为用户可能永远不会访问这些页面。
    • 耦合度高： 将路由和权限信息紧密耦合在一起可能会导致代码的可维护性降低，特别是在大型应用中。

  2. 方案二

    初始化的时候先挂载不需要权限控制的路由，比如登录页，404等错误页。如果用户通过URL进行强制访问，则会直接进入404，相当于从源头上做了控制

    登录后，获取用户的权限信息，然后筛选有权限访问的路由，在全局路由守卫里进行调用addRoutes添加路由

    import router from './router';
import store from './store';
import { Message } from 'element-ui';
import NProgress from 'nprogress'; // progress bar
import 'nprogress/nprogress.css'; // progress bar style
import { getToken } from '@/utils/auth'; // getToken from cookie
import { RouteLocationNormalized, NavigationGuardNext } from 'vue-router';

NProgress.configure({ showSpinner: false }); // NProgress Configuration

// permission judge function
function hasPermission(roles: string[], permissionRoles: string[] | undefined): boolean {
  if (roles.indexOf('admin') >= 0) return true; // admin permission passed directly
  if (!permissionRoles) return true;
  return roles.some(role => permissionRoles.indexOf(role) >= 0);
}

const whiteList = ['/login', '/authredirect']; // no redirect whitelist

router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
  NProgress.start(); // start progress bar

  if (getToken()) { // determine if there has token
    /* has token*/
    if (to.path === '/login') {
      next({ path: '/' });
      NProgress.done(); // if the current page is dashboard will not trigger afterEach hook, so manually handle it
    } else {
      if (store.getters.roles.length === 0) { // determine if the current user has pulled the user_info information
        store.dispatch('GetUserInfo').then(res => { // pull user_info
          const roles = res.data.roles; // note: roles must be an array, such as: ['editor','develop']
          store.dispatch('GenerateRoutes', { roles }).then(() => { // generate accessible route table based on roles
            router.addRoute(store.getters.addRouters[0]); // dynamically add accessible route table
            next({ ...to, replace: true }); // hack method to ensure that addRoutes has completed, set the replace: true so the navigation will not leave a history record
          });
        }).catch((err) => {
          store.dispatch('FedLogOut').then(() => {
            Message.error(err || 'Verification failed, please login again');
            next({ path: '/' });
          });
        });
      } else {
        // If there is no need to dynamically change permissions, you can directly call next() to delete the following permission judgment ↓
        if (hasPermission(store.getters.roles, to.meta.roles)) {
          next();
        } else {
          next({ path: '/401', replace: true, query: { noGoBack: true } });
        }
        // You can delete above ↑
      }
    }
  } else {
    /* has no token*/
    if (whiteList.indexOf(to.path) !== -1) { // in the login whitelist, enter directly
      next();
    } else {
      next('/login'); // otherwise, redirect all to the login page
      NProgress.done(); // if the current page is login will not trigger the afterEach hook, so manually handle it
    }
  }
});

router.afterEach(() => {
  NProgress.done(); // finish progress bar
});

    按需挂载，路由就需要知道用户的路由权限，也就是在用户登录进来的时候就要知道当前用户拥有哪些路由权限

    这种方式也存在了以下的缺点：

    • 全局路由守卫里，每次路由跳转都要做判断
    • 菜单信息写死在前端，要改个显示文字或权限信息，需要重新编译
    • 菜单跟路由耦合在一起，定义路由的时候还有添加菜单显示标题，图标之类的信息，而且路由不一定作为菜单显示，还要多加字段进行标识

菜单权限

菜单权限通常指在一个应用程序或系统中，对用户或用户组在系统菜单中的访问和操作进行控制的功能。具体来说，菜单权限包括了用户能够看到和操作的菜单项、导航链接或按钮等。

  1. 方案一

    菜单与路由分离，菜单由后端返回

    前端定义路由信息

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

    name字段都不为空，需要根据此字段与后端返回菜单做关联，后端返回的菜单信息中必须要有name对应的字段，并且做唯一性校验

    全局路由守卫里做判断

    import { RouteRecordRaw, createRouter, createWebHashHistory } from 'vue-router';
import { ElMessage } from 'element-plus';
import { getToken } from '@/utils/auth'; // getToken from cookie
import store from '@/store';
import Util from '@/utils/util';

const whiteList = ['/login', '/authredirect']; // no redirect whitelist

const router = createRouter({
  history: createWebHashHistory(),
  routes: [],
});

function hasPermission(route: RouteRecordRaw, accessMenu: any[]): boolean {
  if (whiteList.indexOf(route.path) !== -1) {
    return true;
  }

  const menu = Util.getMenuByName(route.name as string, accessMenu);

  if (menu.name) {
    return true;
  }

  return false;
}

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.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
          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, router.options.routes as RouteRecordRaw[], next);
        } else {
          next({ path: '/403', replace: true });
        }
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
      next();
    } else {
      next('/login');
    }
  }

  const menu = Util.getMenuByName(to.name as string, store.getters.accessMenu);
  Util.title(menu.title);
});

router.afterEach((to) => {
  window.scrollTo(0, 0);
});

export default router;

    每次路由跳转的时候都要判断权限，这里的判断也很简单，因为菜单的name与路由的name是一一对应的，而后端返回的菜单就已经是经过权限过滤的

    如果根据路由name找不到对应的菜单，就表示用户有没权限访问

    如果路由很多，可以在应用初始化的时候，只挂载不需要权限控制的路由。取得后端返回的菜单后，根据菜单与路由的对应关系，筛选出可访问的路由，通过addRoutes动态挂载

    这种方式的缺点：

    • 菜单需要与路由做一一对应，前端添加了新功能，需要通过菜单管理功能添加新的菜单，如果菜单配置的不对会导致应用不能正常使用
    • 全局路由守卫里，每次路由跳转都要做判断

  2. 方案二

    菜单和路由都由后端返回

    前端统一定义路由组件

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

    后端路由组件返回以下格式

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

    在将后端返回路由通过addRoutes动态挂载之间，需要将数据处理一下，将component字段换为真正的组件

    如果有嵌套路由，后端功能设计的时候，要注意添加相应的字段，前端拿到数据也要做相应的处理

    这种方法也会存在缺点：

    • 全局路由守卫里，每次路由跳转都要做判断
    • 前后端的配合要求更高

按钮权限

  1. 方案一 按钮权限也可以用v-if判断

但是如果页面过多，每个页面页面都要获取用户权限role和路由表里的meta.btnPermissions，然后再做判断

  1. 方案二

通过自定义指令进行按钮权限的判断

首先配置路由

{
    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 { DirectiveBinding } from 'vue';

/** 权限指令 **/
const has = {
  mounted(el: HTMLElement, binding: DirectiveBinding, vnode: any) {
    // 获取页面按钮权限
    let btnPermissionsArr: string[] = [];

    if (binding.value) {
      // 如果指令传值，获取指令参数，根据指令参数和当前登录人按钮权限做比较。
      btnPermissionsArr = Array.of(binding.value);
    } else {
      // 否则获取路由中的参数，根据路由的btnPermissionsArr和当前登录人按钮权限做比较。
      btnPermissionsArr = vnode.appContext.config.globalProperties.$route.meta.btnPermissions;
    }

    if (!vnode.appContext.config.globalProperties.$_has(btnPermissionsArr)) {
      el.parentNode?.removeChild(el);
    }
  }
};

// 权限检查方法
const $_has = function (value: string[]): boolean {
  let isExist = false;
  // 获取用户按钮权限
  let btnPermissionsStr = sessionStorage.getItem('btnPermissions');
  if (btnPermissionsStr == undefined || btnPermissionsStr == null) {
    return false;
  }
  if (value.indexOf(btnPermissionsStr) > -1) {
    isExist = true;
  }
  return isExist;
};

export { has, $_has };

请注意以下几点：

  1. 使用 DirectiveBinding 来替代 Vue 2 中的 binding。
  2. 使用 vnode.appContext.config.globalProperties 来访问 Vue 实例中的全局属性，因为在 Vue 3 中 $root 被废弃。
  3. 使用 el.parentNode?.removeChild(el); 来处理可能为空的情况，因为 TypeScript 严格模式下要求对可能为 null 或 undefined 的值进行处理。
  4. 这里假定你的权限检查方法 $_has 已经在全局可用。这是 Vue 3 的一种全局方法的推荐做法。

在使用的按钮中只需要引用v-has指令

<el-button @click='editClick' type="primary" v-has>编辑</el-button>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/212602.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【算法刷题】Day11

【算法刷题】Day11

文章目录 面试题 08.01. 三步问题题干&#xff1a;算法原理&#xff1a;1、状态表示2、状态转移方程3、初始化4、填表顺序5、返回值 代码&#xff1a; 209. 长度最小的子数组题干&#xff1a;算法原理&#xff1a;1、暴力枚举出所有的子数组的和2、利用单调性&#xff0c;使用“…
阅读更多...
通过查看ThreadLocal的源码进行简单理解

通过查看ThreadLocal的源码进行简单理解

目录 为什么要使用ThreadLocal&#xff1f; 简单案例 ThreadLocal源码分析 断点跟踪 为什么要使用ThreadLocal 在多线程下&#xff0c;如果同时修改公共变量可能会存在线程安全问题&#xff0c;JDK虽然提供了同步锁与Lock等方法给公共访问资源加锁&#xff0c;但在高并发…
阅读更多...
光学3D表面轮廓仪超0.1nm纵向分辨能力，让显微形貌分毫毕现

光学3D表面轮廓仪超0.1nm纵向分辨能力，让显微形貌分毫毕现

在工业应用中&#xff0c;光学3D表面轮廓仪超0.1nm的纵向分辨能力能够高精度测量物体的表面形貌&#xff0c;可用于质量控制、表面工程和纳米制造等领域。 与其它表面形貌测量方法相比&#xff0c;光学3D表面轮廓仪达到纳米级别的相移干涉法(PSI)和垂直扫描干涉法(VSI)&#x…
阅读更多...
深度学习记录--初识向量化

深度学习记录--初识向量化

什么是向量化&#xff1f; 之前计算logistic回归损失函数时&#xff0c;在代码实现时&#xff0c;讨论了for循环&#xff1a;过多的for循环会拖慢计算的速度(尤其当数据量很大时) 因此&#xff0c;为了加快计算&#xff0c;向量化是一种手段 运用python的numpy库&#xff0c…
阅读更多...
数学建模之典型相关分析

数学建模之典型相关分析

发现新天地,欢迎访问 介绍 典型相关分析&#xff08;Canonical Correlation analysis&#xff09;研究两组变量&#xff08;每组变量中都可能有多个指标&#xff09;之间相关关系的一种多元统计方法。它能够揭示出两组变量之间的内在联系。 例子 我们要探究观众和业内人士对…
阅读更多...
Appwidget开发基本介绍

Appwidget开发基本介绍

本篇主要对appwidget开发进行简单介绍&#xff0c;为后续漏洞挖掘相关做前置铺垫 appwidget简介 官方解释如下&#xff1a; 应用微件是可以嵌入其他应用&#xff08;如主屏幕&#xff09;并接收定期更新的微型应用视图。这些视图称为界面中的微件&#xff0c;您可以使用应用微…
阅读更多...
ZLMediakit-method ANNOUNCE failed: 401 Unauthorized（ffmpeg、obs推流rtmp到ZLM发现的问题）

ZLMediakit-method ANNOUNCE failed: 401 Unauthorized（ffmpeg、obs推流rtmp到ZLM发现的问题）

错误截图 解决办法&#xff1a;能推流成功&#xff0c;但是不能写入到wvp数据库中 修改配置文件config.ini 改成0 修改之后 重启服务 systemctl restart zlm*推流成功 解决办法&#xff1a;能推流&#xff0c;能写入数据库中 替换zlm版本&#xff0c;可以用我文章中提供的编译…
阅读更多...
SpringDataRedis 操作 Redis，并指定数据序列化器

SpringDataRedis 操作 Redis，并指定数据序列化器

文章目录 1. SpringDataRedis 概述2. 快速入门2.1 导入pom坐标2.2 配置文件2.3 测试代码2.4 数据序列化器2.5 StringRedisTemplate2.6 总结 1. SpringDataRedis 概述 SpringData 是Spring 中数据操作的模块&#xff0c;包含对各种数据库的集成&#xff0c;其中对Redis的集成模…
阅读更多...
Linux Makefile的认识及CMake的使用

Linux Makefile的认识及CMake的使用

1 Makefile的作用 Makefile 指的是一个叫 Makefile 的文件，里面提前写了一些指令。每次要自动化的完成一个比较复杂项目的自动编译用的时候，就在命令行输入“make”命令Makefile使用。使用Makefile可以 “智能” 的知道： 1 哪些文件需要先进行编译。 2 当某一文件在某次mak…
阅读更多...
【动态规划】LeetCode-LCR166.珠宝的最高价值

【动态规划】LeetCode-LCR166.珠宝的最高价值

&#x1f388;算法那些事专栏说明&#xff1a;这是一个记录刷题日常的专栏&#xff0c;每个文章标题前都会写明这道题使用的算法。专栏每日计划至少更新1道题目&#xff0c;在这立下Flag&#x1f6a9; &#x1f3e0;个人主页&#xff1a;Jammingpro &#x1f4d5;专栏链接&…
阅读更多...
GODOC命令无效，原因是需要手动安装

GODOC命令无效，原因是需要手动安装

在看《GO程序设计语言》这本书&#xff0c;按照其中的内容&#xff0c;想看下GO自带的包的文档。 书中讲&#xff0c;可以直接输入GoDOC命令来打开一个服务器&#xff0c;从而可以用浏览器访问文档库。输入命令后&#xff0c;系统提示找不到该命令。 查了资料后才发现&#xff…
阅读更多...
SpringAMQP入门案例——发送消息

SpringAMQP入门案例——发送消息

依赖 <!--SpringAMQP起步依赖--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId> </dependency> yml配置文件 自行修改 spring:rabbitmq:host: 192.168.220.130 # …
阅读更多...
西南科技大学模拟电子技术实验五（集成运算放大器的应用设计）预习报告

西南科技大学模拟电子技术实验五（集成运算放大器的应用设计）预习报告

一、计算/设计过程 设计一：用集成运放设计一个输入为0.05v，放大为-100的反相比例运算电路。 对于理想电路，反相比例运算电路的输出电压与输入电压之间的关系如下： =-100，所以 =100 若是假定R1为100k，则R2= =1k 为了减小输入级偏置电流引起的运算误差，在同相输入端…
阅读更多...
【Element-ui】InputNumber 计数器与Select 选择器

【Element-ui】InputNumber 计数器与Select 选择器

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、InputNumber 计数器1.1 基础用法&#xff1a;1.2 禁用状态1.3 步数1.4 严格步数1.5 精度1.6 尺寸1.7 按钮位置1.8 Events1.9 Methods 二、Select 选择器2.1…
阅读更多...
编程怎么学才能快速入门，分享一款中文编程工具快速学习编程思路，中文编程工具之边条主控菜单构件简介

编程怎么学才能快速入门，分享一款中文编程工具快速学习编程思路，中文编程工具之边条主控菜单构件简介

编程怎么学才能快速入门&#xff0c;分享一款中文编程工具快速学习编程思路&#xff0c;中文编程工具之边条主控菜单构件简介 一、前言 零基础自学编程&#xff0c;中文编程工具下载&#xff0c;中文编程工具构件之扩展系统菜单构件教程编程系统化教程链接https://jywxz.blog…
阅读更多...
Istio可观测性

Istio可观测性

Istio可观测性 image-20231129072302901 前言 Istio 为网格内所有的服务通信生成详细的遥测数据。这种遥测技术提供了服务行为的可观测性&#xff0c;使运维人员能够排查故障、维护和优化应用程序&#xff0c;而不会给开发人员带来其他额外的负担。通过 Istio&#xff0c;运维…
阅读更多...
基于 Vue、Datav、Echart 框架的 “ 数据大屏项目 “，通过 Vue 组件实现数据动态刷新渲染，内部图表可实现自由替换

基于 Vue、Datav、Echart 框架的 “ 数据大屏项目 “，通过 Vue 组件实现数据动态刷新渲染，内部图表可实现自由替换

最近在研究大数据分析&#xff0c;基于 Vue、Datav、Echart 框架的 " 数据大屏项目 "&#xff0c;通过 Vue 组件实现数据动态刷新渲染&#xff0c;内部图表可实现自由替换。部分图表使用 DataV 自带组件&#xff0c;可进行更改&#xff0c;详情请点击下方 DataV 文档…
阅读更多...
伪原创API，批量创作伪原创文章

伪原创API，批量创作伪原创文章

内容创作已经成为互联网领域中不可或缺的一环。越来越多的内容创作者和网站管理员开始寻找更高效的伪原创工具&#xff0c;以确保其内容的独特性。 百度文心一言API 我们来了解一下百度文心一言API。作为百度文心推出的一项人工智能服务&#xff0c;通过自然语言处理技术&…
阅读更多...
态势感知是什么

态势感知是什么

在当今高度信息化的时代&#xff0c;信息安全风险已经成为企业、政府和个人的重要关注点。为了有效应对这些风险&#xff0c;态势感知成为了一种日益重要的能力。态势感知是一种基于环境的、动态、整体地洞悉安全风险的能力&#xff0c;是以安全大数据为基础&#xff0c;从全局…
阅读更多...
水果编曲软件fl studio手机版下载

水果编曲软件fl studio手机版下载

fl studio mobile手机版中文名水果编曲软件&#xff0c;它是一款非常不错的音乐编曲软件&#xff0c;凭借简单易上手的操作方式&#xff0c;强悍且实用的功能&#xff0c;深受到了音乐创作者的喜爱&#xff0c;不仅仅提供了广阔的音乐创作空间&#xff0c;可以让用户对舞曲、轻…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站