antd-design-vue-pro切换用户菜单不刷新

z不像程序员的程序猿

已于 2024-08-20 09:33:31 修改

阅读量870

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： antd菜单刷新 antd菜单菜单刷新

于 2022-06-30 19:04:52 首次发布

本文链接：https://blog.csdn.net/student_zz/article/details/125546518

vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何解决Antd Design Vue Pro框架中用户切换时菜单不刷新的问题。通过修改permission.js中的filterAsyncRouter方法，实现菜单数据按新用户权限刷新。

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

antd-design-vue-pro切换用户菜单不刷新

半年没写博客了今天来点干货

看这篇博客之前你必须掌握以下：

antd基本部署
autd菜单控制
确保用户切换后菜单数据有刷新

找到这个文件：src/store/modules/permission.js
找到下面这个方法：

在这里插入图片描述

修改：

function filterAsyncRouter(routerMap, roles) {
  const asyncRouterMap = cloneDeep(routerMap)
  const accessedRouters = asyncRouterMap.filter(route => {
    if (hasPermission(roles.permissionList, route)) {
      if (route.children && route.children.length) {
        route.children = filterAsyncRouter(route.children, roles)
      }
      return true
    }
    return false
  })
  return accessedRouters
}

说明：
antd本身对漏油有缓存，所以菜单数据用的还是之前用户的。
const asyncRouterMap = cloneDeep(routerMap)
将routerMap克隆下重新赋值。