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 navalwaysShow: 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 directlyif (!permissionRoles) return true;return roles.some(role => permissionRoles.indexOf(role) >= 0);
}const whiteList = ['/login', '/authredirect']; // no redirect whitelistrouter.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {NProgress.start(); // start progress barif (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 informationstore.dispatch('GetUserInfo').then(res => { // pull user_infoconst 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 rolesrouter.addRoute(store.getters.addRouters[0]); // dynamically add accessible route tablenext({ ...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 directlynext();} else {next('/login'); // otherwise, redirect all to the login pageNProgress.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 whitelistconst 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.mzph.cn/news/192798.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

javaScript函数总结

javaScript函数总结

一、函数是什么&#xff1f; 函数&#xff0c;就是一个一系列JavaScript语句的集合&#xff0c;这是为了完成某一个会重复使用的特定功能。在需要该功能的时候&#xff0c;直接调用函数即可&#xff0c;而不必每次都编写一大堆重复的代码。并且在需要修改该功能的时候&#xf…
阅读更多...
LeetCode841. Keys and Rooms

LeetCode841. Keys and Rooms

文章目录 一、题目二、题解 一、题目 There are n rooms labeled from 0 to n - 1 and all the rooms are locked except for room 0. Your goal is to visit all the rooms. However, you cannot enter a locked room without having its key. When you visit a room, you m…
阅读更多...
深度学习记录--广播(Broadcasting)

深度学习记录--广播(Broadcasting)

什么是广播&#xff1f; 广播(Broadcasting)&#xff0c;在python中是一种矩阵初等运算的手段&#xff0c;用于将一个常数扩展成一个矩阵&#xff0c;使得运算可行 广播的作用 比如&#xff1a; 一个1*n的矩阵要和常数b相加&#xff0c;广播使得常数b扩展成一个1*n的矩阵 …
阅读更多...
zemax之初级像差理论与像差校正——慧差

zemax之初级像差理论与像差校正——慧差

通过上节介绍&#xff0c;我们已经知道在轴上视场产生的球差是旋转对称的像差。在进行光学系统设计时&#xff0c;同时需要保证轴上物点和轴外物点的成像质量。轴外物点成像时会引入轴外像差&#xff0c;即轴外视场产生的慧差&#xff08;coma aberration&#xff09; 1.慧差概…
阅读更多...
申请Azure学生订阅——人工验证

申请Azure学生订阅——人工验证

一&#xff1a;联系客服进行人工验证 点击 Services Hub 填写资料申请人工验证 点击 Azure - Sign up 进行学生验证 二&#xff1a;与客服的邮件沟通的记录 ​​​​一、结果&#xff08;输入客服给的验证码后&#xff0c;笔者便得到了学生订阅&#xff09;&#xff1a; 二…
阅读更多...
强化学习Markov重要公式推导过程

强化学习Markov重要公式推导过程

Markov决策过程&#xff08;Markov Decision Process&#xff0c;MDP&#xff09; Markov过程是一种用于描述决策问题的数学框架&#xff0c;是强化学习的基础。MDP中&#xff0c;决策者面对一系列的状态和动作&#xff0c;每个状态下采取不同的动作会获得不同的奖励&#xff…
阅读更多...
k8s中批量处理Pod应用的Job和CronJob控制器、处理守护型pod的DaemonSet控制器介绍

k8s中批量处理Pod应用的Job和CronJob控制器、处理守护型pod的DaemonSet控制器介绍

目录 一.Job控制器 1.简介 2.Jobs较完整解释 3.示例演示 4.注意&#xff1a;如上例的话&#xff0c;执行“kubectl delete -f myJob.yaml”就可以将job删掉 二.CronJob&#xff08;简写为cj&#xff09; 1.简介 2.CronJob较完整解释 3.案例演示 4.如上例的话&#xf…
阅读更多...
[原创][2]探究C#多线程开发细节-“线程的无顺序性“

[原创][2]探究C#多线程开发细节-“线程的无顺序性“

[简介] 常用网名: 猪头三 出生日期: 1981.XX.XX QQ: 643439947 个人网站: 80x86汇编小站 https://www.x86asm.org 编程生涯: 2001年~至今[共22年] 职业生涯: 20年 开发语言: C/C、80x86ASM、PHP、Perl、Objective-C、Object Pascal、C#、Python 开发工具: Visual Studio、Delph…
阅读更多...
在CentOS7版本下安装Docker与Docker Compose

在CentOS7版本下安装Docker与Docker Compose

目录 Docker简介 Docker安装 Docker Compose简介 Docker Compose安装 Docker简介 Docker是一个开源的应用容器引擎&#xff0c;让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中&#xff0c;然后发布到任何流行的Linux或Windows操作系统的机器上&#xff0c;也…
阅读更多...
【Numpy】一组标量

【Numpy】一组标量

在NumPy中&#xff0c;当你对一个数组和一个向量进行逐元素相乘时&#xff0c;它们的形状需要满足广播规则&#xff0c;才能够进行元素级的乘法操作。广播是一组规则&#xff0c;允许NumPy在不同形状的数组上执行操作&#xff0c;从而使得某些操作更加灵活和高效。 在你的情况…
阅读更多...
golang Pool实战与底层实现

golang Pool实战与底层实现

使用的go版本为 go1.21.2 首先我们写一个简单的Pool的使用代码 package mainimport "sync"var bytePool sync.Pool{New: func() interface{} {b : make([]byte, 1024)return &b}, }func main() {for j : 0; j < 10; j {obj : bytePool.Get().(*[]byte) // …
阅读更多...
Python高级数据结构——并查集（Disjoint Set）

Python高级数据结构——并查集（Disjoint Set）

Python中的并查集&#xff08;Disjoint Set&#xff09;&#xff1a;高级数据结构解析 并查集是一种用于处理集合的数据结构&#xff0c;它主要支持两种操作&#xff1a;合并两个集合和查找一个元素所属的集合。在本文中&#xff0c;我们将深入讲解Python中的并查集&#xff0…
阅读更多...
Java基础-----Date类及其相关类（一）

Java基础-----Date类及其相关类（一）

文章目录 1. Date类1.1 简介1.2 构造方法1.3 主要方法 2. DateFormat 类2.1 简介2.2 实例化方式一&#xff1a;通过静态方法的调用2.2 实例化方式二&#xff1a;通过创建子类对象 3. Calendar类4. GregorianCalendar 1. Date类 1.1 简介 java.util.Date:表示指定的时间信息&a…
阅读更多...
vivado实现分析与收敛技巧7-布局规划

vivado实现分析与收敛技巧7-布局规划

关于布局规划 布局规划有助于设计满足时序要求。当设计难以始终如一满足时序要求或者从未满足时序要求时 &#xff0c; AMD 建议您执行布局规划。如果您与设计团队协作并且协作过程中一致性至关重要&#xff0c; 那么布局规划同样可以发挥作用。布局规划可通过减少平均布线延…
阅读更多...
Redis-安装、配置和修改配置文件、以及在Ubuntu和CentOS上设置Redis服务的开机启动和防火墙设置，以及客户端连接。

Redis-安装、配置和修改配置文件、以及在Ubuntu和CentOS上设置Redis服务的开机启动和防火墙设置，以及客户端连接。

目录 1. Redis简介 2. 离线安装 2.1 准备工作 2.2 解压、安装 2.3 修改配置文件 2.4 redis服务与关闭 2.5 redis服务的开机启动 2.5.1 Ubuntu上的配置 2.5.2 centos上的配置 3. 在线安装 4. 设置防火墙 5. 客户端连接 1. Redis简介 Redis 是完全开源免费的&#x…
阅读更多...
鼠标点击效果.html(网上收集6)

鼠标点击效果.html(网上收集6)

<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>鼠标点击</title> </head><body> <script>(function () {var a_idx 0;window.onclick function (event) {var a new Array(…
阅读更多...
docker 如何在容器内重启 php

docker 如何在容器内重启 php

要在Docker容器内重启PHP&#xff0c;您可以按照以下步骤进行操作&#xff1a; 1. 进入您的Docker容器。可以使用以下命令启动一个交互式的容器会话&#xff1a; docker exec -it <container_name> /bin/bash其中<container_name>是您的容器的名称。。 2. 在容器内…
阅读更多...
【Python从入门到进阶】43.验证码识别工具结合requests的使用

【Python从入门到进阶】43.验证码识别工具结合requests的使用

接上篇《42、使用requests的Cookie登录古诗文网站》 上一篇我们介绍了如何利用requests的Cookie登录古诗文网。本篇我们来学习如何使用验证码识别工具进行登录验证的自动识别。 一、图片验证码识别过程及手段 上一篇我们通过requests的session方法&#xff0c;带着原网页登录…
阅读更多...
人工智能 - 人脸识别：发展历史、技术全解与实战

人工智能 - 人脸识别：发展历史、技术全解与实战

目录 一、人脸识别技术的发展历程早期探索&#xff1a;20世纪60至80年代技术价值点&#xff1a; 自动化与算法化&#xff1a;20世纪90年代技术价值点&#xff1a; 深度学习的革命&#xff1a;21世纪初至今技术价值点&#xff1a; 二、几何特征方法详解与实战几何特征方法的原理…
阅读更多...
golang实现文件上传(高并发+分块+断点续传+加密)

golang实现文件上传(高并发+分块+断点续传+加密)

运行视频 // todo 根据前端传递文件加密 func (s *FileProcess) FileProcessEncryptionByFront(file multipart.File, h *multipart.FileHeader) interface{} { //根据字节直接处理文件 这个是前端传递的二进制流s.FileProcessInit() //文件初始化 设置原来文件…
阅读更多...
最新文章

Copyright @ 2022~2023