Проблема с использованием метода удаления в операции CRUD в Angular 8 и Laravel и JWT - PullRequest
Новая
       38

Проблема с использованием метода удаления в операции CRUD в Angular 8 и Laravel и JWT

0 голосов
/ 05 июля 2019

Я работаю над одностраничным приложением, созданным с использованием Angular 8 на внешнем интерфейсе и Laravel на внутреннем.На веб-интерфейсе у меня есть форма, в которой есть кнопки, позволяющие пользователю редактировать или удалять пользователя.Когда кнопка удаления нажата, я фиксирую идентификатор текущего пользователя, и в файле логики я анализирую идентификатор для общего сервиса, в результате чего я анализирую бэкэнд через JWT.

На сервисе использую метод удаления Angular http method.Проблема в том, что когда я выкидываю идентификатор пользователя на серверную ошибку get на консоли.Когда я переключаю метод, чтобы отправить данные анализирует правильно.

Пожалуйста, помогите?

Часть формы, где пользователь нажимает кнопку удаления и подтверждает, и я позже передаю файл логики машинописи 

 <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>

Файл логики машинописи 

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 that is called from the frontend when user 
  //deletes the button
  deleteUser(id:number){
    return this.Auth.delete(id).subscribe(
      data => console.log(data),
      error => console.log(error)
    );
  }

}

Служба аутентификации, где я передаю данные бэкэнду 

   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`);
  }
}

Служба токенов 

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);
  }

  //contains the token of the logged in user
  get(){
    return localStorage.getItem('token');
  }

  remove(){
    return localStorage.removeItem('token');
  }
}

Внутренний маршрут Laravel 

Route::group([
    'middleware' => 'api',
], function () {
    Route::delete('deleteUser/{id}', 'SubmitFormController@deleteUser');
});

SubmitFormController 

  public function deleteUser($id){
        dd($id);
    }

CORS.PHP в Laravel, поскольку я использую JWT для анализа данных 

 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);
    }

1 Ответ

1 голос
/ 05 июля 2019

Ваш угловой код неверен, потому что вы используете JWT для аутентификации, поэтому для выполнения операции CRUD вам необходимо отправить свой токен на сервер для аутентификации, после чего вы можете делать все, что захотите.

Пример: 

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

delete(id:number){
  const httpOptions = {
    headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Authorization': 'your bearer token'
    })
  };

 return this.http.delete(`${this.baseUrl}/deleteUser/${id}, httpOptions`);
}
...