Design and Implementation of Permission Control in Frontend‑Backend Separation Architecture

In a front‑end/back‑end separated architecture, all interaction scenarios become data, making traditional permission control schemes unsuitable for the front‑end and prompting a redesign of permission management.

What does permission control actually control? It is essential to understand two concepts: resources and permissions. A resource refers to any piece of information within the system—pages, data, buttons, images, even a separator line can be considered a resource. A permission is the identifier required to access a specific resource.

Thus, permission control essentially governs which system resources a logged‑in user can access based on the set of permission identifiers the user possesses.

Responsibilities in a front‑end/back‑end separated model

Backend: provides data APIs.

Frontend: handles routing control and page rendering.

Because the front‑end controls the user interface, it must enforce permission checks for resource entry points. Front‑end permission control includes:

Routing permission control: filter illegal requests so users can only navigate to pages within their permission scope.

Component‑level permission control: render page components (buttons, tables, separators, etc.) according to the user's permissions.

With the rapid development of component‑based front‑ends, every visible element can be treated as a component, making component‑level permission control the ultimate implementation. An elegant usage example is:

<component permissionName='xxx' />

The front‑end can render all resources a user is allowed to see, but it cannot guarantee the security of data APIs; determined users may bypass the UI and call APIs directly. Therefore, the backend must enforce permission verification on the API level.

Implementation ideas

While any resource can theoretically be permission‑controlled, in practice we often limit granularity to meaningful UI elements such as buttons. The following examples illustrate how to implement both front‑end and back‑end permission checks.

Front‑end route permission control (React example)

let hasPermission = permission.check(current.permissionName);
{hasPermission ? children : <Exception type={403}/>}

Encapsulated permission button component

<BirdButton permissionName={'sys'} type='primary'>Test Button</BirdButton>

Backend interceptor for permission validation (Java example)

public class SsoAuthorizeInterceptor extends HandlerInterceptorAdapter {
    @Autowired
    private TicketHandler ticketHandler;
    @Autowired
    private SsoAuthorizeManager authorizeManager;
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        if (!(handler instanceof HandlerMethod)) return false;
        HandlerMethod handlerMethod = (HandlerMethod) handler;
        SsoAuthorize authorize = handlerMethod.getMethodAnnotation(SsoAuthorize.class);
        if (authorize != null) {
            TicketInfo ticketInfo = ticketHandler.getTicket(request);
            if (ticketInfo == null) {
                throw new UnAuthorizedException("User information has expired.");
            }
            String[] requirePermissions = authorize.permissions();
            if (requirePermissions.length == 0) return true;
            boolean isCheckAll = authorize.isCheckAll();
            UserPermissionChecker permissionChecker = authorizeManager.getUserPermissionChecker();
            if (!permissionChecker.hasPermissions(ticketInfo.getUserId(), requirePermissions, isCheckAll)) {
                throw new ForbiddenException("User does not have the required permissions.");
            }
        }
        return true;
    }
}

The source code for the front‑end permission control ideas is available at github.com/liuxx001/bird-front . The project also provides other useful components such as bird‑selector (dropdown), bird‑grid (auto data table), bird‑tree‑grid, bird‑tree, bird‑form, and bird‑button, each with its own documentation links.

All these business components are designed to wrap server APIs, balancing flexibility with faster development speed.