如何在前端使用Angular或Vue.js配合Spring Boot实现登录注册？

在前端使用Angular或Vue.js配合Spring Boot实现登录注册，通常需要完成以下几个步骤：

### Angular

1. **设置项目结构**: 创建一个新的Angular项目，例如使用`ng new my-app`命令创建。

2. **登录/注册组件**: 在`src/app`目录下创建`login.component`和`registration.component`，分别处理登录和注册表单。

3. **服务**: 创建`AuthService`，使用HttpClient或HttpModule与Spring Boot后端交互。例如，发送POST请求进行注册和登录。

import { HttpClient } from '@angular/common/http';

@Injectable()
export class AuthService {
  constructor(private http: HttpClient) {}

  register(user: any) {
    return this.http.post('/api/auth/register', user);
  }

  login(credentials: any) {
    return this.http.post('/api/auth/login', credentials);
  }
}

4. **表单验证**: 使用Angular的`FormsModule`或第三方库如`ngx-formly`来验证表单输入。

5. **路由守卫**: 使用`CanActivate`或`AuthGuard`实现路由保护，只有在登录成功后才能访问特定页面。

### Vue.js

1. **安装依赖**: 安装Vue CLI，然后创建新项目。安装axios库以便于向服务器发送HTTP请求。

2. **组件编写**: 分别创建`Login.vue`和`Registration.vue`组件，处理登录和注册逻辑。

3. **Vue实例化**: 在main.js中创建Vue实例，并配置axios。

4. **封装axios**: 创建一个axios实例并导出，供所有组件共用。

5. **表单验证**: 使用Vue的内置v-model指令和`v-bind:class`绑定样式来自定义表单验证。

6. **路由保护**: 用vue-router的beforeEach钩子来检查是否有token，如果没有则重定向至登录页面。

### 最后，记得在后端设置相应的API路径和对应的处理逻辑。