Frontend SDK Design and Integration for a Unified Permission System

Building on previous design and backend implementation articles, this final piece introduces the frontend SDK for a unified permission system, which provides login , getUserPermssion , and a special routerFilter API to fetch user data and filter menu trees.

For ordinary React projects, the SDK is invoked before the app mounts using commonLogin to obtain userInfo and permissionInfo , after which routerFilter can be applied to the route configuration:

import { commonLogin } from '@zz-common/zz-permission';
(async () => {
  const { userInfo = {}, permissionInfo = {} } = await commonLogin({ appCode: '' });
  const { resources } = permissionInfo;
  render();
})();

import { routerFilter } from '@zz-common/zz-permission';
const router = [];
const newRouter = routerFilter(router);

For Umi projects, install the access plugin, then modify src/app.ts to call commonLogin and store the permission list in initialState :

// app.ts
import { commonLogin } from '@zz-common/zz-permission';
export async function getInitialState() {
  const { permissionInfo, userInfo } = await commonLogin({ appCode: '' });
  const { resources = [] } = permissionInfo;
  return { userInfo, permissionList: resources };
}

Create src/access.ts to map route access fields to permission codes, generating an accessList object used by Umi's Access component.

import routes from '../config/routes';
function findRouteAccessList() { /* ... */ }
export default (initialState = {}) => {
  const { permissionList = [] } = initialState;
  const accessList = permissionList.reduce((acc, item) => { acc[item.code] = true; return acc; }, {});
  const routePermissions = findRouteAccessList();
  routePermissions.forEach(key => { if (!(key in accessList)) accessList[key] = false; });
  return accessList;
};

A CheckAuth component wraps buttons to hide them when the corresponding permission code is false:

import React from 'react';
import { useAccess, Access } from 'umi';
const CheckAuth = ({ children, permissionCode }) => {
  const access = useAccess();
  const accessible = access[permissionCode];
  return
{children}
;
};
export default CheckAuth;

Dynamic permission‑based menus are achieved by fetching a permission tree from the backend and merging it with local routes. Helper functions in dynamicRoute.ts (e.g., renderRoutes , getRedirectRoute ) flatten local routes, render components, and build a combined route list.

export function renderRoutes(sourceRoutes = [], localRoutes = []) { /* ... */ }
export function getRedirectRoute(routes = [], cataloguePath = '/') { /* ... */ }

The patchRoutes runtime hook replaces the original route configuration with the generated routes, adds a redirect route, and appends a 404 fallback.

export function patchRoutes({ routes }) {
  const localRoutes = routes[0].routes[0].routes;
  const mainRoutes = renderRoutes(authRoutes, localRoutes);
  const redirectRoute = getRedirectRoute(mainRoutes);
  if (redirectRoute) mainRoutes.unshift(redirectRoute);
  mainRoutes.push({ component: NotFound });
  routes[0].routes[0].routes = mainRoutes;
}

In summary, the SDK centralizes permission handling for menus, routes, and button visibility; it must be invoked before rendering, and when combined with the company’s Umi scaffolding, it enables a streamlined, permission‑aware front‑end architecture.