【Vue】权限控制

权限管理

分类:

  1. 页面权限
  2. 功能(按钮)权限
  3. 接口权限

vue3-element-admin 的实现方案

一般我们在业务中将 路由可以分为两种,constantRoutesasyncRoutes

  • constantRoutes: 代表那些不需要动态判断权限的路由,如登录页、404(或者不存在的路由)、首页、数据大屏等通用页面。

  • asyncRoutes: 代表那些需求动态判断权限并通过 addRoutes 动态添加的页面。

后台管理系统中的路由都具有不同的访问权限,侧边菜单栏也是同理,需要根据权限,异步生成。

整体步骤都十分类似:

我们在登录后获取 token ,将其存入 localStorage 中,用来“象征用户身份”。

登录表单提交业务实现:

/** 登录表单提交 */
function handleLoginSubmit() {loginFormRef.value?.validate((valid: boolean) => {if (valid) {loading.value = true;userStore.login(loginData.value).then(() => {const { path, queryParams } = parseRedirect();router.push({ path: path, query: queryParams });}).catch(() => {getCaptcha();}).finally(() => {loading.value = false;});}});
}

调用登录接口,存储 token 到localStorage 中。

/*** 登录* @param {LoginData}* @returns*/
function login(loginData: LoginData) {return new Promise<void>((resolve, reject) => {AuthAPI.login(loginData).then((data) => {const { tokenType, accessToken } = data;localStorage.setItem(TOKEN_KEY, tokenType + " " + accessToken); // Bearer eyJhbGciOiJIUzI1NiJ9.xxx.xxxresolve();}).catch((error) => {reject(error);});});
}

登录接口。

class AuthAPI {/** 登录 接口*/static login(data: LoginData) {const formData = new FormData();formData.append("username", data.username);formData.append("password", data.password);formData.append("captchaKey", data.captchaKey);formData.append("captchaCode", data.captchaCode);return request<any, LoginResult>({url: "/api/v1/auth/login",method: "post",data: formData,headers: {"Content-Type": "multipart/form-data",},});}// ...
}

获取验证码。

/** 获取验证码 */
function getCaptcha() {AuthAPI.getCaptcha().then((data) => {loginData.value.captchaKey = data.captchaKey;captchaBase64.value = data.captchaBase64;});
}

通过上述过程,我们已经成功获取 token 并存储在了 localStorage 中。

之后我们就可以根据 token “用户身份” 来进行权限控制了。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

token 可以获取用户角色,而不同角色对应不同权限的路由,然后通过 router.addRoutes 动态挂载路由。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

调用获取路由接口,获取路由表,进行动态路由处理,将其与常量路由进行拼接,得到总路由。

/*** 生成动态路由*/
function generateRoutes() {return new Promise<RouteRecordRaw[]>((resolve, reject) => {MenuAPI.getRoutes().then((data) => {const dynamicRoutes = transformRoutes(data);routes.value = constantRoutes.concat(dynamicRoutes);resolve(dynamicRoutes);}).catch((error) => {reject(error);});});
}

这里使用 mock 数据:

export default defineMock([{url: "menus/routes",method: ["GET"],body: {code: "00000",data: [{path: "/doc",component: "Layout",redirect: "https://juejin.cn/post/7228990409909108793",name: "/doc",meta: {title: "平台文档",icon: "document",hidden: false,alwaysShow: false,params: null,},children: [{path: "internal-doc",component: "demo/internal-doc",name: "InternalDoc",meta: {title: "平台文档(内嵌)",icon: "document",hidden: false,alwaysShow: false,params: null,},},{path: "https://juejin.cn/post/7228990409909108793",name: "Https://juejin.cn/post/7228990409909108793",meta: {title: "平台文档(外链)",icon: "link",hidden: false,alwaysShow: false,params: null,},},],},{path: "/multi-level",component: "Layout",name: "/multiLevel",meta: {title: "多级菜单",icon: "cascader",hidden: false,alwaysShow: true,params: null,},children: [{path: "multi-level1",component: "demo/multi-level/level1",name: "MultiLevel1",meta: {title: "菜单一级",icon: "",hidden: false,alwaysShow: true,params: null,},children: [{path: "multi-level2",component: "demo/multi-level/children/level2",name: "MultiLevel2",meta: {title: "菜单二级",icon: "",hidden: false,alwaysShow: false,params: null,},children: [{path: "multi-level3-1",component: "demo/multi-level/children/children/level3-1",name: "MultiLevel31",meta: {title: "菜单三级-1",icon: "",hidden: false,keepAlive: true,alwaysShow: false,params: null,},},{path: "multi-level3-2",component: "demo/multi-level/children/children/level3-2",name: "MultiLevel32",meta: {title: "菜单三级-2",icon: "",hidden: false,keepAlive: true,alwaysShow: false,params: null,},},],},],},],},],msg: "一切ok",},},
]);

转换路由数据为组件(根据实际业务进行弹性操作)。

/*** 转换路由数据为组件*/
const transformRoutes = (routes: RouteVO[]) => {const asyncRoutes: RouteRecordRaw[] = [];routes.forEach((route) => {const tmpRoute = { ...route } as RouteRecordRaw;// 顶级目录,替换为 Layout 组件if (tmpRoute.component?.toString() == "Layout") {tmpRoute.component = Layout;} else {// 其他菜单,根据组件路径动态加载组件const component = modules[`../../views/${tmpRoute.component}.vue`];if (component) {tmpRoute.component = component;} else {tmpRoute.component = modules[`../../views/error-page/404.vue`];}}if (tmpRoute.children) {tmpRoute.children = transformRoutes(route.children);}asyncRoutes.push(tmpRoute);});return asyncRoutes;
};

vue-element-admin 的实现方案

当然他们只是实现的写法不同,大致的思路还是相同的。

为了便于理解主要思路和提取关键代码,下面使用尚硅谷硅谷甄选项目的实现方案代码讲解(和vue-element-admin的大差不差)。

先看下用户信息:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在用户 store 中过滤用户的异步路由(用路由的名字进行过滤区分-所以要保证名字的唯一):

//用于过滤当前用户需要展示的异步路由
// asyncRoute 所有异步路由 routes 用户拥有权限的路由
function filterAsyncRoute(asnycRoute: any, routes: any) {return asnycRoute.filter((item: any) => {if (routes.includes(item.name)) {if (item.children && item.children.length > 0) {// 新的 item.children 也需要进行同样的过滤操作 item.children = filterAsyncRoute(item.children, routes);}return true;}})
}

获取用户个人信息后再 store 中操作路由:

//计算当前用户需要展示的异步路由
let userAsyncRoute = filterAsyncRoute(cloneDeep(asnycRoute), result.data.routes);
//菜单需要的数路由数据
this.menuRoutes = [...constantRoute, ...userAsyncRoute, anyRoute];
//目前路由器管理的只有常量路由,再异步获取路由路由信息后,异步路由、任意路由动态追加到路由管理中
[...userAsyncRoute, anyRoute].forEach((route: any) => {router.addRoute(route);
});

路由表:

//对外暴露配置路由(常量路由):全部用户都可以访问到的路由
export const constantRoute = [{//登录path: '/login',component: () => import('@/views/login/index.vue'),name: 'login',meta: {title: '登录',//菜单标题hidden: true,//代表路由标题在菜单中是否隐藏  true:隐藏 false:不隐藏icon: "Promotion",//菜单文字左侧的图标,支持element-plus全部图标}},{//登录成功以后展示数据的路由path: '/',component: () => import('@/layout/index.vue'),name: 'layout',meta: {title: '',hidden: false,icon: ''},redirect: '/home',children: [{path: '/home',component: () => import('@/views/home/index.vue'),meta: {title: '首页',hidden: false,icon: 'HomeFilled'}}]},{//404path: '/404',component: () => import('@/views/404/index.vue'),name: '404',meta: {title: '404',hidden: true,icon: 'DocumentDelete'}},{path: '/screen',component: () => import('@/views/screen/index.vue'),name: 'Screen',meta: {hidden: false,title: '数据大屏',icon: 'Platform'}}]//异步路由
export const asnycRoute = [{path: '/acl',component: () => import('@/layout/index.vue'),name: 'Acl',meta: {title: '权限管理',icon: 'Lock'},redirect: '/acl/user',children: [{path: '/acl/user',component: () => import('@/views/acl/user/index.vue'),name: 'User',meta: {title: '用户管理',icon: 'User'}},{path: '/acl/role',component: () => import('@/views/acl/role/index.vue'),name: 'Role',meta: {title: '角色管理',icon: 'UserFilled'}},{path: '/acl/permission',component: () => import('@/views/acl/permission/index.vue'),name: 'Permission',meta: {title: '菜单管理',icon: 'Monitor'}}]},{path: '/product',component: () => import('@/layout/index.vue'),name: 'Product',meta: {title: '商品管理',icon: 'Goods',},redirect: '/product/trademark',children: [{path: '/product/trademark',component: () => import('@/views/product/trademark/index.vue'),name: "Trademark",meta: {title: '品牌管理',icon: 'ShoppingCartFull',}},{path: '/product/attr',component: () => import('@/views/product/attr/index.vue'),name: "Attr",meta: {title: '属性管理',icon: 'ChromeFilled',}},{path: '/product/spu',component: () => import('@/views/product/spu/index.vue'),name: "Spu",meta: {title: 'SPU管理',icon: 'Calendar',}},{path: '/product/sku',component: () => import('@/views/product/sku/index.vue'),name: "Sku",meta: {title: 'SKU管理',icon: 'Orange',}},]}
]//任意路由
export const anyRoute = {//任意路由path: '/:pathMatch(.*)*',redirect: '/404',name: 'Any',meta: {title: '任意路由',hidden: true,icon: 'DataLine'}
}

路由器对象(初始化的时候只注册了常量路由):

//创建路由器
let router = createRouter({//路由模式hashhistory: createWebHashHistory(),routes: constantRoute,//滚动行为scrollBehavior() {return {left: 0,top: 0}}
});

路由鉴权守卫(这里在某些业务情况下可以增加白名单,对权限进行再一次划分):

//路由鉴权:鉴权,项目当中路由能不能被的权限的设置(某一个路由什么条件下可以访问、什么条件下不可以访问)
import router from '@/router';
import setting from './setting';
import nprogress from 'nprogress';
//引入进度条样式
import "nprogress/nprogress.css";
nprogress.configure({ showSpinner: false });
//获取用户相关的小仓库内部token数据,去判断用户是否登录成功
import useUserStore from './store/modules/user';
import pinia from './store';
let userStore = useUserStore(pinia);
//全局守卫:项目当中任意路由切换都会触发的钩子
//全局前置守卫
router.beforeEach(async (to: any, from: any, next: any) => {document.title = `${setting.title} - ${to.meta.title}`//to:你将要访问那个路由//from:你从来个路由而来//next:路由的放行函数nprogress.start();//获取token,去判断用户登录、还是未登录let token = userStore.token;//获取用户名字let username = userStore.username;//用户登录判断if (token) {//登录成功,访问login,不能访问,指向首页if (to.path == '/login') {next({ path: '/' })} else {//登录成功访问其余六个路由(登录排除)//有用户信息if (username) {//放行next();} else {//如果没有用户信息,在守卫这里发请求获取到了用户信息再放行try {//获取用户信息await userStore.userInfo();//放行//万一:刷新的时候是异步路由,有可能获取到用户信息、异步路由还没有加载完毕,出现空白的效果next({...to,replace:true})} catch (error) {//token过期:获取不到用户信息了//用户手动修改本地存储token//退出登录->用户相关的数据清空await userStore.userLogout();next({ path: '/login', query: { redirect: to.path } })}}}} else {//用户未登录判断if (to.path == '/login') {next();} else {next({ path: '/login', query: { redirect: to.path } });}}
})
//全局后置守卫
router.afterEach((to: any, from: any) => {nprogress.done();
});//第一个问题:任意路由切换实现进度条业务 ---nprogress
//第二个问题:路由鉴权(路由组件访问权限的设置)
//全部路由组件:登录|404|任意路由|首页|数据大屏|权限管理(三个子路由)|商品管理(四个子路由)
//用户未登录:可以访问login,其余六个路由不能访问(指向login)
//用户登录成功:不可以访问login[指向首页],其余的路由可以访问

这里用到了 next({…to,replace:true}) ,它的原理是:

router.addRoutes是同步方法,整体流程:

  1. 路由跳转,根据目标地址从router中提取route信息,由于此时还没addRouters,所以解析出来的route是个空的,不包含组件。
  2. 执行beforeEach钩子函数,然后内部会动态添加路由,但此时route已经生成了,不是说router.addRoutes后,这个route会自动更新,如果直接next(),最终渲染的就是空的。
  3. 调用next({ …to, replace: true }),会abort刚刚的跳转,然后重新走一遍上述逻辑,这时从router中提取的route信息就包含组件了,之后就和正常逻辑一样了。
    主要原因就是生成route是在执行beforeEach钩子之前。

上述解释摘自手摸手,带你用vue撸后台 系列二(登录权限篇) - 掘金 (juejin.cn)评论区

页面权限总结

页面权限:

  1. 用户登录后,服务端返回一个权限树(用树形结构呈现权限数据),然后我们去解析这个树形结构,得到我们需要的路由表(动态路由对象),本质上就是一个由路由对象为元素的数组。
  2. 然后通过 vue 中的动态路由,也就是 addRoutes,动态的添加路由。
  3. 最后根据路由去渲染多级菜单栏。

按钮权限

可以自定义一个全局指定,用于按钮权限的判断。

import pinia from '@/store';
import useUserStore from '@/store/modules/user';
let userStore =useUserStore(pinia)
export const isHasButton = (app: any) => {//获取对应的用户仓库//全局自定义指令:实现按钮的权限app.directive('has', {//代表使用这个全局自定义指令的DOM|组件挂载完毕的时候会执行一次mounted(el:any,options:any) {//自定义指令右侧的数值:如果在用户信息buttons数组当中没有//从DOM树上干掉if(!userStore.buttons.includes(options.value)){el.parentNode.removeChild(el);}},})
}

el 为该元素,options 为:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在 app.ts 中引入。

import {isHasButton} from '@/directive/has.ts';
isHasButton(app);

使用:

v-has="`btn.Trademark.add`"

按钮(功能)权限总结

服务端返回的权限树中包含了指定页面下指定按钮的数据,可以通过 v-if 或者 disable 来控制按钮权限。

接口权限

配合功能权限,一般由服务端进行处理。

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

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

相关文章

标题:“八股文”在实际工作中是助力、阻力还是空谈?

标题&#xff1a;“八股文”在实际工作中是助力、阻力还是空谈&#xff1f; “八股文”&#xff0c;在程序员的面试和工作中一直是一个备受争议的话题。它既是许多程序员进入职场的敲门砖&#xff0c;也被一些人认为是脱离实际的空谈。本文将从“八股文”对招聘过程的影响、在…

【echarts】 柱状图,最后带“竖线”

具体&#xff1a; https://echarts.zhangmuchen.top/#/detail?cid28ea6-0601-e9f5-9cc29-c022b758 let data [{value: 0,name: 数据格式一},{value: 55,name: 数据格式二},{value: 66,name: 数据格式三},{value: 75,name: 数据格式四},{value: 20,name: 数据格式五}];getAr…

2、Flink 在 DataStream 和 Table 之间进行转换

1.概述 Table API 和 DataStream API 都可以处理有界流和无界流。 DataStream API 提供了流处理的基础(时间、状态和数据流管理);Table API 抽象了许多内部内容,并提供了一个结构化和声明性的 API;在处理历史数据时,需要管理有边界的流;无边界流出现在实时处理场景中,…

wordpress调用栏目最新内容、调用栏目推荐内容、调用栏目随机内容

想要在首页调用wordpress某个栏目的内容&#xff0c;可以按照分类ID来调用&#xff0c;调用出来的内容一般有&#xff1a;调用栏目最新内容、调用栏目推荐内容、调用栏目随机内容这三种形式。简站wordpress小编在此为大家放出三种不同方式调用的代码如下&#xff1a; 通过指定…

盘点.软件测试模型

软件开发模型   软件开发模型(Software Development Model)是指软件开发全部过程、活动和任务的结构框架。软件开发包括需求、设计、编码和测试等阶段&#xff0c;有时也包括维护阶段。 软件开发模型能清晰、直观地表达软件开发全过程&#xff0c;明确规定了要完成的主要活动…

云计算day15

⼀、web基本概念和常识 Web&#xff1a;为⽤户提供的⼀种在互联⽹上浏览信息的服务&#xff0c;Web 服 务是动态的、可交 互的、跨平台的和图形化的。 Web 服务为⽤户提供各种互联⽹服务&#xff0c;这些服务包括信息浏览 服务&#xff0c;以及各种交互式服务&#xff0c;…

C++类与对象-六大成员函数

默认成员函数就是用户没有显式实现&#xff0c;编译器会⾃动⽣成的成员函数称为默认成员函数。⼀个空类编译器会默认⽣成8个默认成员函数。本文只介绍其中6个&#xff0c;C11增加两个函数见后续博客。 目录 一、构造函数 1.1 概念 1.2 特性 1.3 使用举例 1.4 初始化列表 1…

探索LLM编程新纪元:AI赋能的编程之旅

探索LLM编程新纪元&#xff1a;AI赋能的编程之旅 引言 在人工智能&#xff08;AI&#xff09;的浪潮中&#xff0c;大型语言模型&#xff08;LLM&#xff09;作为自然语言处理&#xff08;NLP&#xff09;领域的璀璨明珠&#xff0c;正逐步渗透到编程的每一个角落。从代码自动…

【C#】文件流和文本处理

1. 文件流的基本概念 文件流是C#中处理文件读写的抽象&#xff0c;它提供了对文件内容进行顺序访问的能力。在文件流中&#xff0c;数据按照字节或块的方式传输&#xff0c;而不受文件中数据的格式影响。文件流通常与System.IO命名空间中的类一起使用&#xff0c;包括FileStrea…

如何通过前端表格控件实现自动化报表?

背景 最近伙伴客户的项目经理遇见一个问题&#xff0c;他们在给甲方做自动化报表工具&#xff0c;项目已经基本做好了&#xff0c;但拿给最终甲方&#xff0c;业务人员不太买账&#xff0c;项目经理为此也是天天抓狂&#xff0c;没有想到合适的应对方案。 现阶段主要面临的问…

geotools 读取shape文件

对于GIS开发者而言&#xff0c;矢量数据是我们经常要用到的&#xff0c;而shape数据是矢量数据中最常用的格式&#xff0c;因此解析shape数据也是作为GIS软件开发人员必备的基础技能&#xff0c;而GeoTools无疑是Java最好用来处理GIS数据的三方库&#xff0c;下面例子是简单的g…

算法训练(leetcode)第三十四天 | 56. 携带矿石资源(第八期模拟笔试)、198. 打家劫舍、213. 打家劫舍 II、337. 打家劫舍 III

刷题记录 *56. 携带矿石资源&#xff08;第八期模拟笔试&#xff09;198. 打家劫舍213. 打家劫舍 II*337. 打家劫舍 III解法一 &#xff08;记忆化递推&#xff09;*解法二 &#xff08;动态规划&#xff09; *56. 携带矿石资源&#xff08;第八期模拟笔试&#xff09; leetco…

防火墙USG2000USG5000配置nat server 时 no-reverse的含义

防火墙USG2000&USG5000配置nat server 时 no-reverse的含义 https://forum.huawei.com/enterprise/zh/thread/580888066099396608?page2 多次执行带参数no-reverse的nat server命令&#xff0c;可以为该内部服务器配置多个公网地址&#xff1b;未配置参数no-reverse则表…

实现代码灵活性:用Roslyn动态编译和执行存储在数据库中的C#代码

在许多现代应用程序中&#xff0c;动态编译和执行代码是提升灵活性和功能的一种强大技术。本文将介绍如何使用Roslyn编译器平台动态编译和执行存储在数据库中的C#代码&#xff0c;并结合实际公司案例来说明这些技术的应用场景。 1. 引言 在很多应用场景中&#xff0c;我们可能…

牛客周赛53---DEF

D.小红组比赛 题目描述 \,\,\,\,\,\,\,\,\,\,小红希望出一场题目&#xff0c;但是他的实力又不够&#xff0c;所以他想到可以从以前的比赛中各抽一题&#xff0c;来组成一场比赛。不过一场比赛的难度应该是有限制的&#xff0c;所以所以这一场比赛会给一个目标难度分数 target…

docker笔记7-dockerfile

docker笔记7-dockerfile 一、dockerfile介绍二、dockerfile指令三、构建自己的镜像 一、dockerfile介绍 Dockerfile是用来构建Docker镜像的构建文件&#xff0c;是由一系列命令和参数构成的脚本。 以下是常用的 Dockerfile 关键字的完整列表和说明&#xff1a; 二、docker…

Vue3自研开源Tree组件 - Vitepress文档功能演示

基于自己学习的一点Vue3和ts的知识&#xff0c;写的一个企业级的开源Tree组件&#xff0c;给大伙儿演示下组件功能和API的使用&#xff0c;如果您喜欢&#xff0c;不妨点赞和关注下&#xff0c;后续会继续分享源码教程&#xff0c;感谢支持&#xff01; 演示视频地址&#xff…

【计算机毕业设计】838装修公司CRM系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

基于微信小程序的高校大学生信息服务平台设计与实现

基于微信小程序的高校大学生信息服务平台设计与实现 Design and Implementation of a College Student Information Service Platform based on WeChat Mini Program 完整下载链接:基于微信小程序的高校大学生信息服务平台设计与实现 文章目录 基于微信小程序的高校大学生信息…