Build a web app where each user sees only the menus and action buttons their account is permitted to access.
Create a backend API that checks individual permissions per endpoint rather than checking broad user roles.
Learn how to separate frontend button visibility from backend API protection in a Java and Vue project.
Requires running a Java Spring Boot server and a Vue frontend dev server separately.
This project is a reference implementation for building a permission management system using Spring Boot on the backend and Vue on the frontend. The README is written in Chinese, but the concept it demonstrates is straightforward: every user in the application can be assigned a set of fine-grained permissions, and both the server and the browser enforce those permissions independently. On the backend, the core idea is that API endpoints check for specific permissions rather than checking what role a user holds. A role (like "admin" or "editor") is just a convenient way to bundle permissions together when setting up accounts, but the actual security check at each endpoint only asks "does this user have the required permission?" not "does this user hold the right role?" This separation makes the system simpler to reason about and easier to extend. On the frontend, after a user logs in the server sends back two lists: the menus this person is allowed to see, and the specific actions (like add, delete, or edit buttons) they are allowed to perform. The Vue application uses these lists to build the navigation dynamically and to show or hide individual buttons on each page. A user who lacks the "article:add" permission simply never sees the button that would let them add an article. Version 2 of the project removed the third-party Shiro security library and replaced it with a custom annotation plus AOP (a Spring feature for applying cross-cutting logic), which reduced the configuration overhead. Authentication now uses tokens instead of server-side sessions, which avoids cross-origin issues common in separated frontend and backend setups. The project provides working backend code in a folder called "back" and frontend code in a folder called "vue". It is intended as a learning reference and starting point rather than a production-ready framework.
← heeexy on gitmyhub — every repo by this author, as a profile.
Verify against the repo before relying on details.