如何实现SpringBoot+Angular普通登录

发布时间：2021-11-23 23:06:05 作者：柒染
来源：亿速云阅读：239

# 如何实现SpringBoot+Angular普通登录

## 前言

在现代Web应用开发中，前后端分离架构已成为主流模式。本文将通过SpringBoot作为后端框架，Angular作为前端框架，演示如何实现一个完整的普通登录功能。我们将涵盖以下核心内容：

1. SpringBoot后端API开发
2. Angular前端页面构建
3. 前后端数据交互
4. 基础安全防护措施

---

## 一、SpringBoot后端实现

### 1. 项目初始化

使用Spring Initializr创建项目，添加依赖：
```xml
<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-security</artifactId>
    </dependency>
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>
</dependencies>

2. 用户实体类

@Data
@Entity
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String username;
    private String password;
}

3. 安全配置类

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.csrf().disable()
            .authorizeRequests()
            .antMatchers("/api/login").permitAll()
            .anyRequest().authenticated()
            .and()
            .addFilter(new JwtAuthenticationFilter(authenticationManager()));
    }
}

4. 登录API接口

@RestController
@RequestMapping("/api")
public class AuthController {
    
    @PostMapping("/login")
    public ResponseEntity<?> login(@RequestBody LoginRequest request) {
        // 验证用户名密码逻辑
        if(authenticate(request.getUsername(), request.getPassword())) {
            String token = JwtUtil.generateToken(request.getUsername());
            return ResponseEntity.ok(new AuthResponse(token));
        }
        return ResponseEntity.status(401).body("认证失败");
    }
}

二、Angular前端实现

1. 创建Angular项目

ng new angular-login-demo
cd angular-login-demo
ng generate component login

2. 登录表单组件

<!-- login.component.html -->
<form (ngSubmit)="onSubmit()">
    <div>
        <label>用户名：</label>
        <input type="text" [(ngModel)]="username" name="username" required>
    </div>
    <div>
        <label>密码：</label>
        <input type="password" [(ngModel)]="password" name="password" required>
    </div>
    <button type="submit">登录</button>
</form>

3. 登录服务

// auth.service.ts
@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private apiUrl = 'http://localhost:8080/api/login';

  constructor(private http: HttpClient) {}

  login(username: string, password: string): Observable<any> {
    return this.http.post(this.apiUrl, { username, password });
  }
}

4. 组件逻辑处理

// login.component.ts
export class LoginComponent {
  username = '';
  password = '';

  constructor(private authService: AuthService, private router: Router) {}

  onSubmit(): void {
    this.authService.login(this.username, this.password).subscribe(
      response => {
        localStorage.setItem('token', response.token);
        this.router.navigate(['/dashboard']);
      },
      error => {
        console.error('登录失败', error);
      }
    );
  }
}

三、前后端联调关键点

1. 跨域问题解决

SpringBoot端添加配置：

@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurer() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                .allowedOrigins("http://localhost:4200")
                .allowedMethods("*");
        }
    };
}

2. 请求头处理

Angular服务中添加拦截器：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = localStorage.getItem('token');
    if (token) {
        req = req.clone({
            setHeaders: { Authorization: `Bearer ${token}` }
        });
    }
    return next.handle(req);
}

四、安全增强建议

密码加密存储：使用BCryptPasswordEncoder加密
HTTPS协议：生产环境必须启用
CSRF防护：正式环境应开启CSRF保护
输入验证：前后端都需要进行输入验证
登录尝试限制：防止暴力破解

五、完整流程测试

启动SpringBoot应用（默认端口8080）
启动Angular应用（ng serve默认端口4200）
访问http://localhost:4200/login
输入测试账号（如admin/123456）
验证跳转和本地存储的token

结语

通过本文的实践，我们完成了SpringBoot+Angular的普通登录功能实现。这个基础方案可以进一步扩展为： - 添加注册功能 - 实现角色权限控制 - 集成第三方登录（OAuth2） - 添加验证码功能

完整代码示例可在GitHub获取（假设的仓库链接）。希望这篇指南能帮助你快速入门前后端分离架构下的登录功能开发。 “`

注：实际实现时需要根据具体需求调整代码，本文示例省略了部分细节（如数据库操作、错误处理的完整实现等），在实际项目中应补充完整。