ant design pro动态路由

已于 2022-11-11 11:00:15 修改
阅读量702 收藏 1
点赞数
文章标签： react.js
于 2022-10-20 14:42:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tree_ge/article/details/127425088
版权

 antd pro 权限路由官网地址 ：权限管理 - Ant Design Pro

一.判断条件数据

        后端传过来的用户名或路由地址,通过sessionStorage存起来。

二.路由修改

需要加权限的页面，添加access参数

1. normalRouteFilter（不可见页面）

2.adminRouteFilter  （管理员可见）

三.access文件修改

通过 sessionStorage获取存的值进行判断，1.adminRouteFilter，判断为true可见。2.normalRouteFilter，判断为true不可见，路由不展示。手动输入路由，页面展示没有权限。

四.保存，浏览器刷新，就完成啦!!

28岁没去过星巴克
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-antdesign-admin-template：Ant Design Pro Vue模板
02-05
蚂蚁设计专业Vue模板 根据改造后的开箱即用的后台管理系统模板，优化了很多内容，更轻量，更简洁，可以在此模板上快速，便捷地去建造自己的后台项目。预览：| 优化：项目结构和文件夹命名，项目结构更加合理 优化：只保留基础的实例路由和页面，删除了其他页面 优化：顶部multiTab的样式，可跟随header固定 优化： 升级为最新的2.x 优化：打包配置，可根据不同打包环境输出不同目录 优化：multiTab快捷呼出交菜单可选范围覆盖到整个选项卡 优化：切换路由的效果，并提供了两个切换效果 补充：配置打包分析和快速lint-ifx命令 新增：变量可用的less变量 新增：权限控制是否开启的配置 补充
Vue+ant-design-pro（2）动态路由
徐小硕—心之所向，素履以往
07-14 3256
ant-design-pro动态路由配置
Ant Design Vue pro 动态路由的实现和打包，2024年上半年最接地气的Android面经
最新发布
碧海朝天素
03-30 794
data”: {“name”: “晓果哈哈哈”,“role”: {“contact_name”: “平台管理员”,“permissionName”: “用户管理”},“permissionName”: “语音管理”},“permissionName”: “App管理”},“permissionName”: “VIP管理”},“permissionName”: “品牌商管理”},“permissionName”: “机器管理”},
umi-antd-pro::ghost:use umi conventional routing in Ant Design Pro 使用umi约定式路由多Tabs的Ant Design Pro（Antd Pro的实验项目）
05-22
English || | | 蚂蚁设计专业版 适用于企业应用程序的即用型UI解决方案，作为React样板。 预览： ： 主页： http ： //pro.ant.design 文档： http : //pro.ant.design/docs/getting-started 变更日志： http : //pro.ant.design/docs/changelog 常见问题解答： http ： //pro.ant.design/docs/faq 中国镜像网站： http ： //ant-design-pro.gitee.io 2.0版现已发布！ :party_popper: :party_popper: :party_popper: 宣布Ant Design Pro 2.0.0 翻译招聘 :loudspeaker: 我们需要您的帮助： https : //github.com/ant-design/ant-design-pro/issues/120 特征 :gem_stone:
基于 Ant Design of Vue 实现的 Ant Design Pro 源码
12-29
基于 Ant Design of Vue 实现的 Ant Design Pro 源码 安装依赖 npm install 开发模式运行 npm run serve 编译项目 npm run build
ant design pro v5 - 03 动态菜单 动态路由（配置路由 动态登录路由 登录菜单）
haiyabtx
10-17 7635
React + TypeScript + Ant Design Pro V5.2 开箱即用的中台前端/设计解决方案。动态菜单 动态路由 （配置路由+动态登录路由）
Ant Design Vue Pro静态路由改为动态路由
小杨很困的博客
03-14 3805
回顾一下将Ant Design Vue Pro静态路由改为动态路由。由于业务需求，需要对Ant Design Vue Pro框架的路由部分进行一个重构， 首先Ant Design Vue Pro是带有两套路由的，分别需要在不同的地方进行配置，下面就来说说我开发过程中碰到的问题并如何解决的
umi＋react＋antdesign pro 实现动态路由和动态菜单（权限管理）
gaoxiaofei520sss的博客
05-25 5162
在这可以直接读取，但是有一个问题 当用户改变时，不能即使返回最新的菜单数据。2、但是所需要的数据就很多了，例如当前菜单是否隐藏，侧边栏不显示等等这些属性。按钮权限可以通过每一个页面权限的子集，来获取某些个字段，通过这些字段的鉴别，来对应的显示/隐藏不同的按钮（按钮权限）在这，你可以拿取跳转的当前路由和你获取的动态菜单做匹配，若从在。1、服务器返回的数据尽可能可前端所需要的数据保持一致，且结构一致。3、动态菜单通过对数据操作，可形成动态路由。1、想要做动态路由，可以通过服务器获取动态菜单的数据来做。
antd pro 服务端获取菜单及设置路由
总结，交流，记录，成长
04-27 5386
app.tsx RunTimeLayoutConfig 运行时配置 关键代码1：值为后台获取的真实菜单及路由信息 initialState?.currentUser?.menus 为项目登录初始化后设置的菜单，此处可以在getInitialState 中进行设置，对后台的菜单进行处理，转换为antd 的格式 menuDataRender: () =>initialState?.currentUser?.menus, 关键代码2： routes.ts 一定要设置好路由和组件对应关系，不然就算获取到路由
Ant Design Vue 动态路由
fearlessnesszhang的博客
03-04 1866
main.js 引入 router import router from './router' new Vue({ router, i18n, created: bootstrap, render: h => h(App) }).$mount('#app') router - index.js new Router import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) import {
react中ant.design框架配置动态路由
精通前端技术，了解后端接口
10-12 1762
动态路由是一种在Web应用程序中用于根据特定参数或条件生成路由路径的方式。与静态路由不同，动态路由的路径不是在代码中硬编码的，而是根据变量或参数的值而生成。这使得动态路由非常适合需要根据不同情况呈现内容或导航到不同页面的情况。动态路由通常使用占位符或参数来定义路由规则，这些参数在访问特定路由时会被替换为实际的数值或文本。这些参数可以是用户输入的数据、URL中的查询字符串、或从应用程序状态中提取的信息。
ant design pro动态菜单
10-08
自己写的ant design pro动态菜单，不足请指正，互相学习借鉴！
ant design pro项目的“页面”选项卡组件-JavaScript开发
05-26
要求React> = 16.8.x（我在引擎盖下使用React钩子）UmiJS> = 3.x Ant Design> = 4安装yarn添加antd-pro-page-tabs或npm install antd-pro-page-tabs设置此项目取决于umi的路由系统和@ umijs / plugin-layout，所有...
Ant design Pro 路由全攻略
JiaEnYa的博客
06-19 5152
Ant design Pro 路由全攻略 蚂蚁金服出品的pro后台管理可以说非常优秀了，下文分享我的路由设置攻略 { name: 'login', path: '/login', component: '../layouts/UserLayout', routes: [ { path: '/login', ...
antDesign实现动态菜单+动态路由
qq_39558062的博客
12-20 3547
配置菜单路由权限有几种方式： 防君子不防小人 菜单栏虽然没有页面权限，但可以输入url访问没有权限的页面 统统防着 这就需要动态路由 实现动态菜单 待更新 实现动态路由 实现思路是使用Umi的运行时配置 提供了几个方法，其中patchRender和render配置配合使用，请求服务端根据响应动态更新路由 patchRender({ routes })：用于修改路由 render(oldRender)：用于渲染之前做权限校验 实现步骤 src目录下新建app.ts app.ts中重写patchRende
Ant Design Pro---【02 UMI路由讲解】
一只菜鸟夹
05-05 1111
在 Umi 中，应用都是单页应用，页面地址的跳转都是在浏览器端完成的，不会重新请求服务端获取 html，html 只在应用初始化时加载一次。所有页面由不同的组件构成，页面的切换其实就是不同组件的切换，你只需要在配置中把不同的路由路径和对应的组件关联上。
SpringBoot + Ant Design Pro Vue实现动态路由和菜单的前后端分离框架
全栈程序猿的专栏
02-22 2164
并将在2.0.3版本中提供，因到目前为止，官方发布的版本为2.0.2，所以本文结合官方提供的解决方案结合SpringBoot后台权限管理进行修改，搭建一套完整的SpringBoot +Vue前后端分离框架。1. main.js 去掉mock // import './mock'6. Login.vue 修改登录页面参数，并添加登录验证码。4. store/user.js 修改登录后获取菜单的处理。4. store/user.js 修改登录后获取菜单的处理。5. login.js 修改登录请求。
Ant Design Pro 使用心得
C的博客
06-29 609
Ant Design Pro 学习心得
Ant Design Pro 动态路由的实现
黄孝果的博客
03-19 5687
提供登录与获取用户信息数据接口 import request from '@/utils/request'; /** * * @returns 首页列表权限 */ export async function queryCurrent():Promise<any>{ return request('/user/info2', { prefix:'/mock', method: 'GET', }); } 登录接口数据 {'code': 200, 'data'.
antdesign pro实现动态路由的菜单
04-02
Ant Design Pro 中的动态路由菜单可以根据用户的权限动态生成菜单，从而提高应用的灵活性和实用性。 下面是实现 Ant Design Pro 动态路由菜单的步骤： 1. 在路由配置文件中设置动态路由： ``` const routerConfig...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值