Currently, I am developing a Single Page Application using Angular 8 on the frontend and Laravel on the backend. The frontend consists of a form with options for users to either edit or delete a user. When the delete button is clicked, I capture the current user's ID and pass it to a common service which then sends it to the backend using JWT.
In the service, I use the delete method from the Angular HTTP module. However, I encountered an issue where dumping the user's ID on the backend resulted in an error being displayed on the console. Interestingly, switching the method to POST allowed the data to be parsed correctly.
I would greatly appreciate any assistance you can provide?
This section shows how the user confirms deletion by pressing a button, followed by the TypeScript logic file:
<td>
<button class="btn btn-primary" (click)="edit(user.id)">Edit</button>
<span *ngIf="confirmDelete">
<span> Are you sure you want to delete ?</span>
<button class="btn btn-danger" (click)="deleteUser(user.id)">Yes </button>
<button class="btn btn-primary" (click)="confirmDelete=false">No </button>
</span>
<button *ngIf="!confirmDelete" class="btn btn-danger" (click)="confirmDelete=true">Delete</button>
</td>
TypeScript logic file:
import { Component, OnInit , ViewChild, ElementRef} from '@angular/core';
import { AuthService } from 'src/app/Services/auth.service';
@Component({
selector: 'app-show',
templateUrl: './show.component.html',
styleUrls: ['./show.component.css']
})
export class ShowComponent implements OnInit {
public userData : any[];
public error = null;
constructor(
private Auth:AuthService,
) { }
ngOnInit() {
}
//Method called when user deletes a record
deleteUser(id:number){
return this.Auth.delete(id).subscribe(
data => console.log(data),
error => console.log(error)
);
}
}
Auth Service for passing data to the backend:
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { TokenService } from './token.service';
@Injectable({
providedIn: 'root'
})
export class AuthService {
private httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': this.Token.get()
})
};
private baseUrl = 'http://localhost/Laravel-anngular-spa/backend/public/api';
constructor(private http:HttpClient,
private Token : TokenService
) {}
signup(data:any){
return this.http.post(`${this.baseUrl}/signup` , data);
}
login(data:any){
return this.http.post(`${this.baseUrl}/login` , data);
}
edit(id:number){
return this.http.put(`${this.baseUrl}/updateUser/${id}, httpOptions`);
}
delete(id:number){
return this.http.delete(`${this.baseUrl}/deleteUser/${id}, httpOptions`);
}
}
Token Service:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class TokenService {
private iss = {
login : 'http://localhost/Laravel-anngular-spa/backend/public/api/login',
signup : 'http://localhost/Laravel-anngular-spa/backend/public/api/signup'
};
constructor() { }
handle(token:any){
this.set(token);
}
set(token:any){
localStorage.setItem('token' , token);
}
get(){
return localStorage.getItem('token');
}
remove(){
return localStorage.removeItem('token');
}
}
Laravel Backend Route:
Route::group([
'middleware' => 'api',
], function () {
Route::delete('deleteUser/{id}', 'SubmitFormController@deleteUser');
});
SubmitFormController:
public function deleteUser($id){
dd($id);
}
CORS.php in Laravel for handling JWT data parsing:
public function handle($request, Closure $next)
{
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Headers:Content-type,X-Auth-Token,Authorization,Origin');
return $next($request);
}