如何用JavaScript向受保护的Laravel API路由发送请求?

Question

描述

我有一个表格,在这个表格中我用JavaScript收集复选框的值. 这些值应该被发送到Laravel后台的一个受保护的API路由.我使用了标准的Laravel auth设置(开箱即用).

问题：我使用标准的Laravel auth设置(开箱即用).

我需要在JavaScript post请求中发送什么来进行身份验证，我该怎么做？我可以在头文件中添加一个Auth token或类似的东西吗？目前我得到的回复是："This action is unauthorized"。

"This action is unauthorized".

exception: "Symfony\\Component\\HttpKernel\\Exception\\AccessDeniedHttpException"

编辑

在我目前的研究中，api token似乎是一个简单的解决方案。但我不知道如何将api token附加到JavaScript post请求中。

这就是用于收集值并将其存储在对象中的JavaScript函数。

import SaveData from "../api/SaveData";

export default async function SaveMultipleReports() {
const table = document.getElementById("reports-dashboard");
const rows = table.querySelectorAll("div[class=report-tr]");

let reports = [];
for (const row of rows) {
    const checkbox_visible = row.querySelector("input[name=visible]")
        .checked;
    const checkbox_slider = document.querySelector(
        "input[name=show_in_slider]"
    ).checked;

    const report = {
        id: row.id,
        visible: checkbox_visible,
        show_in_slider: checkbox_slider
    };
    reports.push(report);
}

console.log(reports);
const response = await SaveData("/api/reports/update", reports);
console.log(response);
}

这就是 SavaData 的功能。

export default async function SaveData(api, data) {
    const token = document
        .querySelector('meta[name="csrf-token"]')
        .getAttribute("content");
    const url = window.location.origin + api;
    const response = await fetch(url, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-CSRF-TOKEN": token,
            Accept: "application/json"
        },
        body: JSON.stringify(data)
    });

    const result = await response.json();
    return result;
}

而这是行在 api.php:

Route::middleware("can:administration")->post("reports/update", "ReportsController@UpdateAll");

整个回收站是 此处.

先谢谢你的时间:)

编辑2

目前，我管理它没有JavaScript。把所有的值，我想更新的形式和加载一个隐藏的输入每个对象的ID（ID是需要的控制器后）。此职位.

{!! Form::open(["route" => ["admin.reports.multiupdate"], "method" => "PUT", "class" => "report-table"]) !!}

... // some HTML

@foreach ($reports as $report)
<div class="report-tr">
  <input type="hidden" name="reports[{{$loop->index}}][id]" value="{{$report->id}}">
  <div class="td-name">
    <p class="td-text">{{$report->name}}</p>
  </div>
  <div class="td-flex">{{$report->body}}</div>
  <div class="tr-wrapper">
    <div class="checkbox-visible">
      <div class="checkbox-container">
        <input class="checkbox" type="checkbox" name="reports[{{$loop->index}}][visible]" value="1" checked>
        <span class="checkmark"></span>
      </div>
      <label class="table-label" for="visible">Sichtbar</label>
    </div>
    <div class="checkbox-slider">
      <div class="checkbox-container">
        <input class="checkbox" type="checkbox" name="reports[{{$loop->index}}][show_in_slider]" value="1"
          {{($report->show_in_slider == 1 ? "checked" : "")}}>
        <span class="checkmark"></span>
      </div>
      <label class="table-label" for="show_in_slider">Im Slider</label>
    </div>
    <div class="td-buttons">

... 

@endforeach
<button class="floating-save">
  @svg("saveAll", "saveAll")
</button>
{!! Form::close() !!}

还有控制器的一段话

public function MultipleUpate(ReportUpdate $request)
  {
     $reports = $request->input("reports");

foreach ($reports as $row) {
  $report = Report::find($row["id"]);

  // giving the checkbox 0, if it isn't checked

  $isVisible = isset($row["visible"]) ? 1 : 0;
  $inSlider = isset($row["show_in_slider"]) ? 1 : 0;

  $report->visible = $isVisible;
  $report->show_in_slider = $inSlider;

  $report->new = false;

  if ($report->save()) {
    $saved = true;
  }
}

if ($saved == true) {
  $request->session()->flash("success",  "Änderungen gespeichert!");
} else {
  $request->session()->flash("error",  "Das hat nicht geklappt!");
}

return back();

．．．ReportUdpate 函数只包含这些。

public function authorize()
  {
    return true;
  }

  public function rules()
  {
    return [
      "visible" => "nullable",
      "show_in_slider" => "nullable"
    ];
  }

Answer 1

你说的是认证, 但使用的是授权中间件. 这两者之间是有区别的.

在这里阅读一下: https:/medium.comdatadriveninvestorauthentication-vs-authorization-716fea914d55

说到这里, 你要找的是一个认证中间件, 它可以保护你的路由不被未经认证的用户使用. Laravel提供了一个名为 Authenticate 出于这个特殊目的。

把你的路线改成这样。

Route::middleware("auth")->post("reports/update", "ReportsController@UpdateAll");