后台管理项目，动态菜单

后台管理项目，从一个项目跳转到另一个新的项目(如下图：商品管理 分离出来做到了新的系统里)，用户权限和菜单列表都在第一个项目的登录接口返回的，怎么在新的项目里设置动态菜单和权限？

img

img

单点登录，跳到新的项目肯定也需要权限校验

在跳转的时候调用一个接口重新获取权限,和老项目登陆获取权限方法一致,无非就是根据用户信息重新查一遍

  • 这个问题的回答你可以参考下: https://ask.csdn.net/questions/1054074
  • 这篇博客也不错, 你可以看下移动端项目功能点及实现方案 （图片居多）
  • 除此之外, 这篇博客: 【面试】网易一面中的 这里写目录标题 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • 您还可以看一下 刘刚老师的莫凡图书商城-微信小程序企业应用实战精讲课程中的 项目实战：实现我的订单功能小节, 巩固相关知识点
  • 以下回答由chatgpt基于相关博客总结生成:

    答案：

    在新的商品管理系统中，我们可以通过登录接口返回的用户权限信息来生成动态菜单，保证权限的正确性。

    1.首先需要在后台的商品管理系统中设置菜单列表和对应的权限，可以通过数据库或者配置文件来存储这些信息。

    2.在前端代码中，通过调用登录接口获取用户权限信息，并将其存储在本地或者sessionStorage中。

    3.在商品管理系统中，根据用户的权限信息生成动态菜单，可以通过自定义路由或者菜单组件来实现。

    4.在生成菜单时需要根据用户的权限过滤掉无权访问的菜单项。

    下面提供一个简单的示例代码：

    // 假设登录接口返回的用户权限信息为： const auth = { 'product:list': true, // 具有商品列表查询权限 'product:add': false, // 不具有商品新增权限 'order:list': true, // 具有订单列表查询权限 'order:add': true // 具有新增订单权限 };

    // 假设菜单配置信息为： const menu = [ { path: '/product', name: '商品管理', auth: 'product:list' }, { path: '/order', name: '订单管理', auth: 'order:list' }, { path: '/neworder', name: '新增订单', auth: 'order:add' }, { path: '/newproduct', name: '新增商品', auth: 'product:add' } // 只有具有商品新增权限的用户才能看到该菜单 ];

    // 在菜单组件中，可以根据用户权限信息动态生成菜单 const AppMenu = () => { const [userAuth, setUserAuth] = useState({}); // 假设用户权限信息存储在userAuth中 const [menuList, setMenuList] = useState([]); // 生成的菜单列表

    useEffect(() => { // 模拟从登录接口获取用户权限信息 const fetchUserAuth = () => { return new Promise(resolve => { setTimeout(() => resolve(auth), 100); }); };

    fetchUserAuth().then(res => {
  setUserAuth(res);  // 将用户权限信息存储在本地中
});

    }, []);

    useEffect(() => { // 根据菜单配置和用户权限生成菜单列表 const getMenuList = () => { return menu.filter(item => userAuth[item.auth]).map(item => ({ path: item.path, name: item.name })); };

    setMenuList(getMenuList());

    }, [userAuth]);

    return (

    • {menuList.map(item => (
    • {item.name}
    • ))}
    ); };

    在上述代码中，我们通过useState来存储用户权限信息和生成的菜单列表。通过useEffect来处理副作用，即获取用户权限信息和根据菜单配置生成菜单列表。在菜单列表生成时，我们根据用户权限信息过滤掉无权访问的菜单项。最后将生成的菜单列表渲染到页面上。

    注意：上述代码只是一个简单的示例，实际应用中更复杂的场景需要更详细的方案设计和代码实现。