Блог

Я хочу войти в систему с помощью Spring Boot и Angular, но я получаю строку «ERR_TOO_MANY_REDIRECTS». В бэкэнде есть функция repsonse, которая возвращает токены, имена пользователей, пароли и роли. Серверная часть работала с почтальоном, я не получил той же ошибки. Соответствующие коды являются следующими. В чем моя ошибка? Спасибо.

 HttpInterceptorService

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpHeaders, HTTP_INTERCEPTORS } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, throwError } from 'rxjs';
import { AuthenticationService } from './services/authentication.service';
import { catchError } from 'rxjs/operators';


@Injectable()
export class HttpInterceptorService implements HttpInterceptor {

    constructor(private authenticationService: AuthenticationService) { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        const currentUser = this.authenticationService.currentUserValue;
        if (currentUser amp;amp; currentUser.generateToken) {
            request = request.clone({
                setHeaders: {
                    Authorization: `Basic ${currentUser.generateToken}`
                }
            });
        }

        return next.handle(request);
    }
}


AuthenticationService


import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';
import { Router } from '@angular/router';
import { environment } from 'src/environments/environment';
import { Observable, BehaviorSubject } from 'rxjs';
import { KullaniciKariyer } from '../models/cvModel/KulaniciKariyer';
import { JwtResponse } from '../models/JwtResponse';

const apiHost = environment.host;

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {

  public username: String;
  public password: String;

  public currentUser: Observable<JwtResponse>;
  private currentUserSubject: BehaviorSubject<JwtResponse>;

  constructor(private http: HttpClient) {
    this.currentUserSubject = new BehaviorSubject<JwtResponse>(JSON.parse(localStorage.getItem('currentUser')));
    this.currentUser = this.currentUserSubject.asObservable();
  }

  public get currentUserValue(): JwtResponse {
    return this.currentUserSubject.value;
  }

  login(tcKimlikNo: string, password: string): Observable<any> {
  
    return this.http.get<any>(apiHost   '/api/login').pipe(
      map(response => {
        if (response) {
          localStorage.setItem('currentUser', JSON.stringify(response));
          this.currentUserSubject.next(response);
        }
        return response;
      })
    );
  }

  logout() {
    localStorage.removeItem('currentUser');
    this.currentUserSubject.next(null);
  }

}


export class JwtResponse {
    generateToken: string;
    username: string;
    password: string;
    roles: string[] = [];
}


Guard  

import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from "@angular/router";
import { Injectable } from "@angular/core";
import { AuthenticationService } from 'src/app/services/authentication.service';
import { KullaniciKariyer } from 'src/app/models/cvModel/KulaniciKariyer';
import { JwtResponse } from 'src/app/models/JwtResponse';

@Injectable()
export class LoginGuard implements CanActivate {


  currentUser: JwtResponse;

  constructor(private router: Router,
    private authenticationService: AuthenticationService) { }
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

    const currentUser = this.authenticationService.currentUserValue;
    if (currentUser) {
      // logged in so return true
      return true;
    }

    // not logged in so redirect to login page with the return url
    this.router.navigate(["anasayfa"]);
    return false;
  }

}


Login.componenet

onSubmit() {

    this.authenticationService.login(this.loginForm.value.username, this.loginForm.value.password)
      .subscribe(
        data => {
          
            this.invalidLogin = false;
            this.loginSuccess = true;
            this.successMessage = 'Success.';
            this.authenticationService.isAuthenticationFunc(true);
            sessionStorage.setItem('role', data.roles);
            this.router.navigate(['pages']);

        },
        error => {
          this.errorMessage = error.message;;
          this.loading = false;
        });
   
  }



Pages.Routing

const routes: Routes = [
  {
    path: '',
    component: PagesComponent,
    children: [
      
      {
        path: 'admin',
        loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
        canActivate: [LoginGuard]
      },

      {
        path: 'editor',
        loadChildren: () => import('./editor/editor.module').then(m => m.EditorModule),
        canActivate: [LoginGuard]
      }
    ],
  }
];


AdminRouting.Routing

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class PagesRoutingModule { }


const routes: Routes = [
  {
    path: 'userCreate',
    component: UserCreateComponent,
    canActivate: [LoginGuard],
    data: { roles: [Constants.ROLE_ADMIN] }
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class AdminRoutingModule { }


EditorRouting.Routing

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class PagesRoutingModule { }


const routes: Routes = [
  {
    path: 'userList',
    component: UserListComponent,
    canActivate: [LoginGuard],
    data: { roles: [Constants.ROLE_EDITOR] }
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class EditorRoutingModule { }
 

Бэкэнд

 WebSecuritConfig

    @Configuration
    @EnableWebSecurity
    @EnableGlobalMethodSecurity(prePostEnabled = true, securedEnabled = true)
    public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
    
        @Autowired
        UserServiceImpl userServiceImpl;
    
        @Autowired
        private JwtTokenUtil jwtTokenUtil;
    
        @Bean
        @Override
        public AuthenticationManager authenticationManagerBean() throws Exception {
            return super.authenticationManagerBean();
        }
    
        @Override
        public void configure(AuthenticationManagerBuilder authenticationManagerBuilder) throws Exception {
            authenticationManagerBuilder.userDetailsService(userServiceImpl).passwordEncoder(passwordEncoder());
        }
    
        @Bean
        public PasswordEncoder passwordEncoder() {
            return new BCryptPasswordEncoder();
        }
    
        @Override
        protected void configure(HttpSecurity http) throws Exception {
            http.cors().and().csrf().disable().
                    authorizeRequests()
                    .antMatchers(HttpMethod.OPTIONS, "/**").permitAll()
                    .anyRequest().fullyAuthenticated()
                    .and()
                    .formLogin().loginPage("/api/login")
                    .and()
                    .httpBasic();
    
            http.addFilter(new JwtAuthorizationFilter(authenticationManager(), jwtTokenUtil));
    
        }
    
        @Bean
        public WebMvcConfigurer corsConfigurer() {
            return new WebMvcConfigurer() {
                @Override
                public void addCorsMappings(CorsRegistry registry) {
                    registry.addMapping("/**").allowedOrigins("*").allowedMethods("*");
                }
            };
        }
    
    }
    ********************
    
    @Service
    @Transactional
    public class UserServiceImpl implements UserDetailsService {
    
        @Autowired
        private UserRepository userRepository;
    
        @Override
        public UserDetails loadUserByUsername(String userName) throws UsernameNotFoundException {
    
            User user = userRepository.findByuserName(userName);
    
            if (user == null) {
                throw new UsernameNotFoundException("User Name is not Found");
            }
    
            return new org.springframework.security.core.userdetails.User(user.getuserName(), user.getPassword(), getAuthority(user));
    
        }
    
        public List<SimpleGrantedAuthority> getAuthority(User user) {
    
            List<SimpleGrantedAuthority> authorities = user.getRoles().stream()
                    .map(role -> new SimpleGrantedAuthority(role.getRoleAdi()))
                    .collect(Collectors.toList());
    
            return authorities;
        }
    
    }


@GetMapping("/api/login")
        public ResponseEntity<?> login(Principal principal) {
            if (principal == null) {
                return ResponseEntity.ok(principal);
            }
            UsernamePasswordAuthenticationToken authenticationToken = (UsernamePasswordAuthenticationToken) principal;
            User user = userRepository.findByUsername(authenticationToken.getName());
    
            
            List<String> roles = user.getRoles().stream()
                    .map(role -> role.getRoleName())
                    .collect(Collectors.toList());
    
            return ResponseEntity.ok(new JwtResponse(jwtTokenUtil.generateToken(authenticationToken),
                    user.getUserName(),
                    user.getPassword(),
                    roles));
        }
 

Вы получаете слишком много перенаправлений, потому что используете spring security со страницей входа /api/login/ и не разрешаете ее в конфигурации. Таким образом, spring security автоматически перенаправляет на страницу входа, но даже страница входа требует аутентификации, поэтому перенаправление происходит снова и снова. Вы можете исправить это, добавив permitAll() метод в конце блока formLogin.

    .formLogin()
      .loginPage("/api/login")
      .permitAll();
 

Но в идеале вы не должны использовать formlogin() . В .loginPage() явадоке говорится следующее:

 login page to redirect to if authentication is required
 

На этой странице входа в систему необходимо сделать запрос на публикацию /api/login с именем пользователя и паролем в теле запроса. Как только это будет сделано, вы будете перенаправлены на другие страницы. Поскольку вы используете angular, вместо этого вам понадобится api для входа в систему.

Вы можете проверить различные способы достижения углового входа в систему с помощью springboot

Кроме того, вы не передаете учетные данные пользователя из угловой формы.