如何使用API​​令牌使用JavaScript向受保护的Laravel API路由发出发布请求?

时间:2020-05-03 16:21:56

标签: javascript laravel authentication post protected

说明

我有一张桌子,在这里我从带有JavaScript的复选框中收集值。此值应发送到Laravel后端中受保护的API路由。 我使用标准的Laravel身份验证设置(开箱即用)。

问题

我必须发送带有JavaScript的身份验证请求的邮件,我该怎么做?我可以在标题中添加身份验证令牌或类似的东西吗? 目前,我得到了答复:

“此操作未经授权”。

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

修改

在我目前的研究中,api令牌似乎是针对我的案例的简单解决方案。但是我不知道如何将api令牌附加到JavaScript发布请求。

那是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");

整个存储库为here

谢谢您的时间:)

编辑2

目前,我在没有JavaScript的情况下进行了管理。把所有的值,我想更新的形式,并为每个对象的ID加载一个隐藏的输入(此ID之后需要为控制器)。 感谢this post

{!! 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() !!}

以及Controller的摘要:

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"
    ];
  }

1 个答案:

答案 0 :(得分:0)

您正在谈论认证,但是使用授权中间件。两者之间是有区别的。

在此处阅读:https://medium.com/datadriveninvestor/authentication-vs-authorization-716fea914d55

话虽如此,您正在寻找的是一种身份验证中间件,该中间件可以保护您的路由免受未经身份验证的用户的侵害。为此,Laravel提供了一种名为Authenticate的中间件。

更改路线,如下所示:

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