补充 vue3用户管理权限(路由控制)

这篇具有很好参考价值的文章主要介绍了补充 vue3用户管理权限(路由控制)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

之前有人问我 ,如果是二级路由如何添加,这里我做一个补充吧。直接拿方法去用就行。也不做解释了。稍微看下就能看懂了

假设,后端返回给我们一个数据 [“/defa”,"/defa/defa1"] 这样的一个路由表,我们就需要通过这个路由表去筛选匹配我们的动态路由,然后在进行添加。假设我们的动态路由是

[
  {
    path: "/defa",
    name: "defa",
    component: () => import("@/views/DefaCat.vue"),
    children: [
      {
        path: "/defa/fase1",
        name: "homelist1",
        component: () => import("@/views/UserZi.vue"),
      },
      {
        path: "/defa/fase9",
        name: "homelist9",
        component: () => import("@/views/UserZi.vue"),
      },
    ],
  },
  {
    path: "/defa/fase2",
    name: "homelist2",
    component: () => import("@/views/UserZi.vue"),
  },
];

这样的一组数据,按照后端返回给我们的数据表,我们最终要拿到的数据是。

[
  {
    path: "/defa",
    name: "defa",
    component: () => import("@/views/DefaCat.vue"),
    children: [
      {
        path: "/defa/fase1",
        name: "homelist1",
        component: () => import("@/views/UserZi.vue"),
      },
    ],
  },
];

这样才符合我们的设计需要,所以这里添加了一个方法,能够筛选出符合我们的代码,注意,这有2个弊端,第一,是当你父路由不存在后端的路由表而子路由存在时,子路由照样会被剔除掉,第二解释,只能筛选2层,也就是说动态路由里只有父路由子路由,多的无法筛选了。

const filterRoutes = (targetPaths:any, sourceRoutes:any) => {
  return sourceRoutes.map((route:any) => {
    const filteredChildren = route.children
      ? route.children.filter((child:any) => targetPaths.includes(child.path))
      : [];

    return {
      ...route,
      children: filteredChildren,
    };
  }).filter((route:any) => route.children.length > 0 || targetPaths.includes(route.path));
};

函数接收2个参数,第一个参数是后端传给我的路由表[“/defa”,"/defa/defa1"] ,第二个参数就是前端定义的整个的动态路由,函数的返回值就是我们的数据啦。我们可以根据这个数据动态添加路由或者是导航栏的权限控制

简易版的动态添加路由,可以作为参考,这里没有加入token是否存在的逻辑。

router.beforeEach((to, from, next) => {
  console.log(to.name, 99);
  if (!to.name) {
    
    filterRoutes(arrlist,routerlist).map((item: any) => {
        router.addRoute(item);  
      
    });
    next({ ...to, replace: true });
  } else {
    next();
  }
  next();
});

现在来说应该算是完全好了,这个这个权限组件,这里我们前端做的事情太多了,可以把活适当的分一点给后端,让后端传我们能直接用的路由表,不是更爽吗 哈哈。

我看哪天有时间,我会出一版封装好的有权限管理的vue3框架,包括路由权限和导航栏权限都会封装好,开箱即用。文章来源地址https://www.toymoban.com/news/detail-810009.html

到了这里,关于补充 vue3用户管理权限(路由控制)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Linux系统知识4—Linux的root用户,su 和 exit 命令,sudo 命令,用户和用户组管理,getent,查看权限控制,修改权限控制 -chmod,修改权限控制-chown

    目录 一.Linux的root用户 1.1 root用户(超级管理员) 1.2 su 和 exit 命令 1.3 sudo 命令 1.为普通用户配置 sudo 认证 二.用户和用户组管理 2.1用户,用户组 2.2用户组的管理 2.3用户管理 2.4.getent 三.查看权限控制 3.1认知权限信息 1.序号1,表示文件,文件夹的权限控制信息 2. 序号2,表

    2024年01月17日
    浏览(72)
  • Django+vue3权限菜单rabc设计和动态路由

    本次是基于Django和vue实现 github源码:nineaiyu/xadmin-server: xadmin-基于Django+vue3的rbac权限管理系统 (github.com) 服务器设计及部分代码  权限控制的话,可以基于Django的permission进行控制,并通过访问api的URL操作 核心代码如下 因此,需要对menu表进行设计,由于涉及到了前端vue路由,

    2024年02月12日
    浏览(49)
  • MySQL数据库——SQL(4)-DCL(管理用户、权限控制)

    目录 管理用户 1.查询用户 2.创建用户 3.修改用户密码 4.删除用户 示例 权限控制 1.查询权限 2.授予权限 3.撤销权限 示例 DCL总结 DCL DCL英文全称是Data Control Language(数据控制语言),用来管理数据库用户、控制数据库的访问权限。 注意: 主机名可以使用通配符‘%’。 这类S

    2024年02月12日
    浏览(60)
  • vue3+antd——实现App.vue页面实时获取权限+用户信息的功能——基础积累

    之前写过一篇文章关于vue3+antd的框架模板,链接如下:http://t.csdn.cn/9dZMS 下面针对 App.vue 页面实时获取权限+用户信息的功能做一下记录 重要的代码如下: 通过 computed 计算属性进行用户信息的实时监听,用户信息更改时也会重新触发user参数的变化,最终导致user内容保持为最

    2024年02月14日
    浏览(37)
  • vue权限管理——请求和响应权限控制

    每次请求请求头都携带token,没有token或者token失效后端会返回错误 防止一些在浏览器上强制将按钮改成可用(如将disabled改为true就可用),然后发起请求后发送后端 响应控制:请求返回401,token无效或者后期,则需要跳转到登录界面

    2024年02月11日
    浏览(45)
  • vue3-实战-11-管理后台-权限管理之角色管理模块

    目录 1-角色列表 1.1-原型需求分析 1.2-接口封装和数据类型定义 1.3-请求服务器端获取列表页面数据 1.4-组件页面动态渲染数据 2-角色新增和编辑 2.1-需求原型分析 2.2-页面结构以及功能实现 3-角色的删除 4-分配权限 4.1-原型需求分析 4.2-获取服务器数据渲染数据 4.3-分配权限  

    2024年02月09日
    浏览(46)
  • vue权限管理——按钮控制

    根据right中的数据对应增删改查按钮  initDynamicRoutes给用户对应的router中动态添加meta元数据后,permission.js中通过router.currentRoute就可以获取 directives/permission.js 获取路由元数据中的rights权限和按钮上的action记录权限做比较:如果包含则有该权限,否则无权限,进行删除元素或者

    2024年02月11日
    浏览(45)
  • 最强的单点登录认证系统,基于RBAC统一权限控制,实现用户生命周期管理,开源、安全

    MaxKey 单点登录认证系统,谐音马克思的钥匙寓意是最大钥匙,是 业界领先的IAM-IDaas身份管理和认证产品 ,支持OAuth 2.x/OpenID Connect、SAML 2.0、JWT、CAS、SCIM等标准协议,提供 安全、标准和开放 的用户身份管理(IDM)、身份认证(AM)、单点登录(SSO)、RBAC权限管理和资源管理等。 MaxKey注

    2024年02月03日
    浏览(57)
  • Vue如何实现权限管理(动态路由addRoutes)

    目录 引言 推荐B站视频 一、权限管理 二、控制权限 接口权限 路由权限控制 方法一 方法二 菜单权限 方法一 方法二 按钮权限 方法一 方法二 项目中会遇到权限管理,来让特定用户有特定权限的场景,那么怎么做这个权限管理,以及有多少办法呢,下面给大家絮叨 vue权限管

    2023年04月25日
    浏览(38)
  • (vue权限管理)前端路由表角色权限管理,通过登录不同角色侧边栏显示对应页面

    1. 首先在src/router/index.js中添加路由表,其中constantRoutes 设置的为所有角色可见的路由,asyncRouterMap为对应权限人员可见路由,demo路由表代码如下: 2.在src/api/user.js中创建用户登录,获取用户信息,以及登出的接口 3.在store/modules/user.js文件,添加获取角色权限role的信息 4.在src

    2024年02月11日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包