JHipster(Angular+Spring Boot)前端三类定制需求技术问询

Hey there! Let's work through your three frontend customizations for your JHipster Angular 5 + Spring Boot project, keeping changes to JHipster's default code as minimal as possible. Here's a step-by-step breakdown for each requirement:

1. Auto-open Login Modal on App Startup (Block Access Until Login) #

JHipster already has authentication guards in place, but to make the login modal pop up right when the app loads instead of showing the homepage first, we'll tweak the AppComponent:

1. Open src/main/webapp/app/app.component.ts
2. Inject the LoginModalService and AccountService in the constructor:

   import { LoginModalService } from './core/login/login-modal.service';
   import { AccountService } from './core/auth/account.service';
   
   constructor(
     private loginModalService: LoginModalService,
     private accountService: AccountService
     // ... keep other existing injections
   ) {}
   

3. Update the ngOnInit method to check if the user is logged in, and open the modal if they're not:

   ngOnInit(): void {
     this.accountService.identity().subscribe(account => {
       if (!account) {
         // Open login modal immediately if no user is authenticated
         this.loginModalService.open();
       }
     });
     // ... keep other existing init logic
   }
   

4. Double-check that all routes are protected by the AuthGuard (JHipster usually sets this up by default) so users can't bypass the login by manually entering a URL.

2. Role-Based Route Access & Root Path Redirect #

To restrict admin-only access to JHipster's default app and redirect regular users to /myapp/, we'll use JHipster's built-in HasAnyAuthorityGuard and add a custom guard for root path handling:

Step 1: Create a Root Redirect Guard #

This guard will check the user's role and redirect them appropriately when they hit the root path:

// src/main/webapp/app/core/auth/root-redirect.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AccountService } from './account.service';
import { Observable } from 'rxjs';
import { map, take } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class RootRedirectGuard implements CanActivate {
  constructor(private accountService: AccountService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.accountService.identity().pipe(
      take(1),
      map(account => {
        if (account) {
          // Redirect admins to JHipster's home, regular users to /myapp/
          const targetRoute = account.authorities.includes('ROLE_ADMIN') ? '/home' : '/myapp';
          this.router.navigate([targetRoute]);
          return false; // Return false since we're handling the redirect
        }
        // Let AuthGuard handle unauthenticated users
        return true;
      })
    );
  }
}

Step 2: Update Route Configurations #

Open src/main/webapp/app/app-routing.module.ts and adjust the routes:

1. Update the root path to use our new guard:

   {
     path: '',
     canActivate: [RootRedirectGuard, AuthGuard],
   },
   

2. Add admin-only restrictions to JHipster's default routes (like /home, /admin, etc.):

   {
     path: 'home',
     component: HomeComponent,
     canActivate: [HasAnyAuthorityGuard],
     data: { authorities: ['ROLE_ADMIN'] },
   },
   // Repeat this pattern for other default routes (e.g., /admin, /entity/**)
   

3. Ensure your custom /myapp/ route is accessible to all logged-in users:

   {
     path: 'myapp',
     component: MyAppComponent, // Replace with your actual component
     canActivate: [AuthGuard],
   },
   

Step 3: Handle Unauthorized Access #

If a regular user tries to access an admin-only route, JHipster's HasAnyAuthorityGuard will throw a 403 error. To redirect them to /myapp/ instead of showing a 403 page, tweak the guard slightly:
Open src/main/webapp/app/core/auth/has-any-authority.guard.ts and modify the handleAuthorizationError method:

private handleAuthorizationError(): Observable<boolean> {
  this.accountService.identity().subscribe(account => {
    if (account && !account.authorities.includes('ROLE_ADMIN')) {
      this.router.navigate(['/myapp']);
    } else {
      this.router.navigate(['/accessdenied']);
    }
  });
  return of(false);
}

3. Redirect to Login Modal on Session Expiry #

JHipster's AuthInterceptor already handles 401 (unauthorized) errors, but we need to make sure it opens the login modal instead of redirecting to a login page, and blocks access until the user re-authenticates:

1. Open src/main/webapp/app/core/auth/auth.interceptor.ts
2. Inject the LoginModalService in the constructor:

   import { LoginModalService } from './login/login-modal.service';
   
   constructor(
     private loginModalService: LoginModalService,
     private accountService: AccountService,
     // ... keep other existing injections
   ) {}
   

3. Update the error handling logic for 401 responses:

   import { EMPTY } from 'rxjs';
   
   return next.handle(request).pipe(
     catchError((error: HttpErrorResponse) => {
       if (error.status === 401) {
         // Clear current user session
         this.accountService.authenticate(null);
         // Open login modal immediately
         this.loginModalService.open();
         // Return an empty observable to block further requests until login
         return EMPTY;
       }
       // Keep other error handling logic intact
       return throwError(() => error);
     })
   );
   

4. Double-check your LoginComponent's success callback to ensure the modal closes and the app navigates to the correct route after login (JHipster usually handles this out of the box).

All these changes should meet your requirements while keeping modifications to JHipster's default code to a minimum. Let me know if you run into any snags!

内容的提问来源于stack exchange，提问作者4535992