Creating a complete login/signup system involves a server-side component, typically
implemented using a technology like [Link], 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 ([Link]):
// [Link]
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthService {
private baseUrl = '[Link] // Update with your server URL
constructor(private http: HttpClient) {}
login(credentials: { username: string, password: string }): Observable<any> {
return [Link](`${[Link]}/login`, credentials);
}
signup(user: { username: string, password: string }): Observable<any> {
return [Link](`${[Link]}/signup`, user);
}
}
Create Auth Interceptor ([Link]):
// [Link]
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 = [Link]('token');
if (token) {
request = [Link]({
setHeaders: {
Authorization: `Bearer ${token}`
}
});
}
return [Link](request);
}
}
Update [Link] to include the interceptor:
// [Link]
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppRoutingModule } from './[Link]';
import { AppComponent } from './[Link]';
import { AuthInterceptor } from './[Link]';
@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 ([Link] and [Link]):
// [Link]
import { Component } from '@angular/core';
import { AuthService } from './[Link]';
@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() {
[Link]({ username: [Link], password:
[Link] }).subscribe(
(response) => {
[Link]('token', [Link]);
// Handle successful login (e.g., navigate to a different page)
},
(error) => {
// Handle login error
}
);
}
}
// [Link]
import { Component } from '@angular/core';
import { AuthService } from './[Link]';
@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() {
[Link]({ username: [Link], password:
[Link] }).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.
