Spring Boot Vue Admin

The project uses Spring Security combined with JSON Web Tokens (JWT) for authentication and authorization.

Workflow:

1. User logs in.
2. Server generates a JWT containing the user's roles and permissions.
3. Client stores the token and includes it in the header of every subsequent request.
4. Server parses and validates the token to authorize the request.

Implementation Details:

When generating the token, both roles and permissions are added to the authorities claim. For example, a user might have authorities like [ROLE_TEST, role:list, user:list].

Controller Authorization: You can protect API endpoints using @PreAuthorize annotations. You can check for specific permissions using hasAuthority or specific roles using hasRole.

// Protect an endpoint by specific permission
@PreAuthorize("hasAuthority('user:list')")

// Protect an endpoint by role OR permission
@PreAuthorize("hasRole('ROLE_ADMIN') or hasAuthority('user:list')")

Follow these steps to clone, set up the backend, and run the frontend of the project.

1. Clone the repository

git clone https://github.com/Zoctan/spring-boot-vue-admin.git
cd spring-boot-vue-admin

2. Backend Setup

Navigate to the api directory and initialize the database using the provided script. Note: Ensure you modify the database connection information before running the script.

cd api
sudo chmod a+x resetDB.sh && ./resetDB.sh
# Start the backend service as per your local environment configuration

3. Frontend Setup

Navigate to the app directory, install dependencies, and start the development server.

cd app
npm install
npm run dev

git clone https://github.com/Zoctan/spring-boot-vue-admin.git
cd spring-boot-vue-admin

# Backend
cd api
sudo chmod a+x resetDB.sh && ./resetDB.sh

# Frontend
cd app
npm install
npm run dev

Because the project uses a decoupled frontend and backend, you must configure Cross-Origin Resource Sharing (CORS) in the JwtAuthenticationFilter.

Specifically, you must:

1. Set appropriate Access-Control-* headers on the response.
2. Handle OPTIONS (preflight) requests by returning immediately with a 200 status code. If the preflight request does not return a 200, the browser will treat the actual request as a failure.

// core/jwt/JwtAuthenticationFilter.java

// Configure CORS headers
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Headers", "Content-Type, Content-Length, Authorization, Accept, X-Requested-With");
response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Expose-Headers", "*");

// Handle preflight OPTIONS request
if (request.getMethod().equals("OPTIONS")) {
    return;
}