Ant design pro v4-服务器菜单和路由权限控制

最新推荐文章于 2023-08-17 09:38:53 发布

置顶

酷比程序

最新推荐文章于 2023-08-17 09:38:53 发布

阅读量1.3k

点赞数 1

文章标签： vue python js web jwt

本文链接：https://blog.youkuaiyun.com/truewq/article/details/109113799

版权

本文介绍了如何在Ant Design Pro V4中实现服务器菜单和路由权限控制，解决不同角色对应不同菜单的问题，以及防止用户非法访问未授权页面。详细步骤包括拉取服务器菜单，动态更新路由，以及服务器下发的菜单和路由格式。通过这些措施，既能控制用户可见的菜单，又能限制非法路径的访问。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要解决的问题：ant design pro默认情况下，菜单和路由都用配置的方式，在前端的config/config.ts中配置。但是大多数后台系统都需要由后端服务器控制权限。

类似的需求一般包括两点：

1、“只看该看的，防君子”：不同角色对应不同菜单，在用户登录时，由服务器根据登录用户的角色生成菜单；有权限的菜单显示，没权限的菜单隐藏。

2、“想看也不行，防小人”：防止用户直接通过在浏览器中输入未授权菜单的path进行访问。

Ant design pro v4版本的官方上，简单说明了从服务器拉取菜单的方法，但是说得很简略，对新手来说还要自己摸索一番。而且这个方案，只能实现上面提到的第1条，只要path被用户知道了，仍然可以强行输入path进行访问。在网上查了半天，才找到解决第2条的方法——动态更新路由。下面就把我的经验分享给大家，不对之处还望指出，不吝赐教。

拉取服务器菜单

1. 实现menuModel，在src\models下，添加menu.ts

import { Effect } from 'dva';
import { Reducer } from 'redux';
import { getMenuData } from '@/services/menu';


export interface MenuModelState {
  menuData?: any[];
}

export interface MenuModelType {
  namespace: 'menu';
  state: MenuModelS

最低0.47元/天解锁文章