Creating a complete login/signup system involves a server-side component, typically
implemented using a technology like Node.js, Express, MongoDB (or any other
database), and JWT (JSON Web Tokens) for authentication. Due to the complexity of a
full authentication system, I'll provide a simplified example demonstrating how you
might structure the Angular client-side authentication flow with HTTP Interceptors.
Create Authentication Service (auth.service.ts):
// auth.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthService {
private baseUrl = 'http://localhost:3000'; // Update with your server URL
constructor(private http: HttpClient) {}
login(credentials: { username: string, password: string }): Observable<any> {
return this.http.post(`${this.baseUrl}/login`, credentials);
}
signup(user: { username: string, password: string }): Observable<any> {
return this.http.post(`${this.baseUrl}/signup`, user);
}
}
Create Auth Interceptor (auth.interceptor.ts):
// auth.interceptor.ts
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from
'@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
intercept(request: HttpRequest<any>, next: HttpHandler):
Observable<HttpEvent<any>> {
const token = localStorage.getItem('token');
if (token) {
request = request.clone({
setHeaders: {
Authorization: `Bearer ${token}`
}
});
}
return next.handle(request);
}
}
Update app.module.ts to include the interceptor:
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthInterceptor } from './auth.interceptor';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
AppRoutingModule
],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
],
bootstrap: [AppComponent]
})
export class AppModule { }
Implement Login and Signup Components (login.component.ts and signup.component.ts):
// login.component.ts
import { Component } from '@angular/core';
import { AuthService } from './auth.service';
@Component({
selector: 'app-login',
template: `
<h2>Login</h2>
<form (submit)="login()">
<label>Username: <input [(ngModel)]="username" name="username"
required></label><br>
<label>Password: <input type="password" [(ngModel)]="password"
name="password" required></label><br>
<button type="submit">Login</button>
</form>
`
})
export class LoginComponent {
username: string = '';
password: string = '';
constructor(private authService: AuthService) {}
login() {
this.authService.login({ username: this.username, password:
this.password }).subscribe(
(response) => {
localStorage.setItem('token', response.token);
// Handle successful login (e.g., navigate to a different page)
},
(error) => {
// Handle login error
}
);
}
}
// signup.component.ts
import { Component } from '@angular/core';
import { AuthService } from './auth.service';
@Component({
selector: 'app-signup',
template: `
<h2>Signup</h2>
<form (submit)="signup()">
<label>Username: <input [(ngModel)]="username" name="username"
required></label><br>
<label>Password: <input type="password" [(ngModel)]="password"
name="password" required></label><br>
<button type="submit">Signup</button>
</form>
`
})
export class SignupComponent {
username: string = '';
password: string = '';
constructor(private authService: AuthService) {}
signup() {
this.authService.signup({ username: this.username, password:
this.password }).subscribe(
(response) => {
// Handle successful signup (e.g., navigate to a different page)
},
(error) => {
// Handle signup error
}
);
}
}
Remember, this is a simplified example. In a real-world scenario, you'd need proper
error handling, token expiration checks, secure password handling (perhaps using
HTTPS), and a robust server-side authentication system. Additionally, this example
uses the localStorage to store the token, which is not the most secure method. In a
production environment, you might consider using HTTP-only cookies for storing
tokens.
