[Feature Request] Server Side Render Routes

[xXAvoraXx]

Background

我喜欢 UmiJs 的优点，尤其是插件逻辑，但我在开发插件方面有困难，下面是我试图公开开发的插件。

众所周知，路由是在 config.ts 中静态定义的，但在我看来这是一个安全漏洞，一些警惕性高的用户可以篡改源代码，看到不应该知道的路由。

我想从服务器上获取信息，了解用户登录后能看到哪些路由，不能看到哪些，然后对传入的路由进行渲染和打包。在这一点上，这个插件发挥了作用，它在我测试非插件版本时可以正常工作，但我需要帮助来改进这个插件。

I love the advantages of UmiJs, especially the plugin logic, but I have a hard time developing plugins, so below you can find the plugin I am trying to develop publicly.

Briefly what I'm trying to do in this plugin is this, as it is known, routes are statically defined in config.ts, but this is a security vulnerability in my opinion, some vigilant users can tamper with the source code and see routes that they should not know about.

I want to get the information from the server about which routes users can and cannot see after logging in, then the routes should be rendered and packaged. That's where this plugin comes in, it works when I test the non-plugin version but I need help to improve it.

Proposal

https://github.com/xXAvoraXx/umi-plugin-ssr-routes

[xiaohuoni]

Although I don't quite understand your description, I think what you may need it

   api.addRuntimePlugin(() => {
      return [withTmpPath({ api, path: `${DIR_NAME}/runtime.tsx`, })];
    });

[xXAvoraXx]

Although I don't quite understand your description, I think what you may need it

   api.addRuntimePlugin(() => {
      return [withTmpPath({ api, path: `${DIR_NAME}/runtime.tsx`, })];
    });

English:

As you know, UmiJS stores route configurations statically, which poses a problem for us. We do not want users to see what the static routes are, as shown in the image below. Instead, we want the route and menu information coming from the 'API' to be rendered after the user logs in. This way, even if the user presses F12 and sees the route configurations, they will only see what we allow.

As a solution, you can provide an example of ProLayout's 'menuDataRender'. However, what 'menuDataRender' does is inform the application which menu data to match with the static route information, but this solution still causes all static routes to be visible.

Chinese:

众所周知，UmiJS 静态地存储路由配置，这对我们来说是一个问题。我们不希望用户看到静态路由是什么，如下图所示。相反，我们希望在用户登录后呈现来自 'API' 的路由和菜单信息。这样，即使用户按下 F12 看到路由配置，他们也只能看到我们允许的内容。

作为解决方案，您可以提供 ProLayout 的 'menuDataRender' 示例。然而，'menuDataRender' 所做的是通知应用程序哪些菜单数据与静态路由信息匹配，但这种解决方案仍然会导致所有静态路由可见。

[AoaoMH]

umi自带的patchRoutes/patchClientRoutes似乎可以实现这个功能？

[xiaohuoni]

关于安全性，我觉得应该是在路由权限和接口权限上处理

[xXAvoraXx]

umi自带的patchRoutes/patchClientRoutes似乎可以实现这个功能？

Yes, I explained how it should be done in the discussion here. After getting the routes from the api, the rendering process takes place and is matched with the menu data.
是的，我在这里的讨论中解释了应该如何操作。 从 api 获取路由后，将执行渲染过程并与菜单数据匹配。

ant-design/ant-design-pro#10898

[xXAvoraXx]

关于安全性，我觉得应该是在路由权限和接口权限上处理

I think security concerns should be in the background, especially since relational-based access control (ReBAC) models have evolved in recent years, making it possible to control each object and authorize users on those objects. I am working on routes and menus that each user can specifically see, which is a need that cannot be overlooked, as there will certainly be those who request it.

我认为安全问题应该置于后台，特别是近年来关系型访问控制（ReBAC）模型的发展，已经可以对每一个对象进行控制并对用户在这些对象上的权限进行授权。我正在研究每个用户可以特定看到的路由和菜单，这是一个不容忽视的需求，肯定会有人提出要求。

https://openfga.dev/

[xXAvoraXx]

@AoaoMH you can try this -> https://www.npmjs.com/package/umi-plugin-ssr-routes

@xiaohuoni

yarn add umi-plugin-ssr-routes

export default defineConfig({  
    plugins: ['umi-plugin-ssr-routes'],
    ssrRoutes: {}
});



// app.tsx
export async function getServerSideRoutes(): Promise<RouteRaw[]> {
  return await getUserRoutes().then((res) => {
    if (res.data) {
      return res.data;
    } else {
      return [];
    }
  });
}

/** GET /api/getUserRoutes */
export async function getUserRoutes(options?: { [key: string]: any }) {
  return request<{
    data: RouteRaw[];
  }>('/api/GetUserRoutes', {
    method: 'GET',
    prefix: undefined,
    ...(options || {}),
  });
}