Javascript Laravel（vue和vuex）添加数据始终返回未经验证的结果

我目前正在制作一个网站，应用处理后端的Laravel、处理前端的Vuejs和处理CRUD Axios的Vuex。对于我的身份验证，我没有使用laravel提供的默认值，而是使用laravel passport

我试图在mysql数据库中添加数据，但遗憾的是，我总是收到这个错误

消息未经验证

我不知道如何修复错误或找出错误的根源

代码

cycle.js（Vuex）

---

ModalAddCycle.vue

<template>
  <div
    class="modal fade"
    id="modalAddCycle"
    tabindex="-1"
    role="dialog"
    aria-labelledby="modalTitle"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <ValidationObserver v-slot="{ invalid, passes, validate }">
          <form @submit.prevent="passes(createCycle)">
            <div class="modal-header">
              <h5 class="modal-title" id="modalTitle">Add Cycle</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span class="color-close" aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <div class="form-group pl-2 pr-2">
                <ValidationProvider
                  name="loading date"
                  mode="eager"
                  v-slot="{ classes, errors }"
                >
                  <label for="date_loading">Loading Date</label>
                  <div class="row">
                    <div class="col-9">
                      <v-date-picker
                        :class="classes"
                        v-model="date_loading"
                        id="date_loading"
                        title-position="left"
                        required
                      />
                    </div>
                    <div class="col ml-4">
                      <!-- <button class="btn btn-primary" type="button" @click="validate">Check</button> -->
                    </div>
                  </div>
                  <small class="form-text text-error">{{ errors[0] }}</small>
                </ValidationProvider>
              </div>
              <div class="form-group pl-2 pr-2">
                <ValidationProvider
                  name="chicken population"
                  mode="eager"
                  rules="numeric"
                  v-slot="{ classes, errors }"
                >
                  <label for="chicken_population">Chicken Population</label>
                  <input
                    :class="classes"
                    v-model="chicken_population"
                    id="chicken_population"
                    type="textr"
                    class="form-input"
                    required
                  />
                  <small class="form-text text-error">{{ errors[0] }}</small>
                </ValidationProvider>
              </div>
              <div class="form-group pl-2 pr-2">
                <ValidationProvider
                  name="clean up"
                  rules="numeric"
                  mode="eager"
                  v-slot="{ classes, errors }"
                >
                  <label for="clean_up">Clean up</label>
                  <input
                    :class="classes"
                    v-model="clean_up"
                    id="clean_up"
                    type="text"
                    class="form-input"
                    required
                  />
                  <small class="form-text text-error">{{ errors[0] }}</small>
                </ValidationProvider>
              </div>
              <div class="form-group pl-2 pr-2">
                <label for="date_harvest">Harvest Date</label>
                <input
                  :value="dateHarvest"
                  id="date_harvest"
                  readonly
                  class="form-control-plaintext ml-2"
                />
              </div>
              <div class="form-group pl-2 pr-2">
                <label for="date_manure_collection">Manure Collection Date</label>
                <input
                  :value="dateManureCollection"
                  id="date_manure_collection"
                  readonly
                  class="form-control-plaintext ml-2"
                />
              </div>
              <div class="form-group pl-2 pr-2">
                <label for="date_cleaning">Cleaning Date</label>
                <input
                  :value="dateCleaning"
                  id="date_cleaning"
                  readonly
                  class="form-control-plaintext ml-2"
                />
              </div>
              <div class="form-group pl-2 pr-2">
                <label for="date_disinfection">Disinfection Date</label>
                <input
                  :value="dateDisinfection"
                  id="date_disinfection"
                  readonly
                  class="form-control-plaintext ml-2"
                />
              </div>
              <div class="form-group pl-2 pr-2">
                <label for="date_rest">Rest Date</label>
                <input
                  :value="dateRest"
                  id="date_disinfection"
                  readonly
                  class="form-control-plaintext ml-2"
                />
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
              <button type="submit" class="btn btn-success">Create</button>
            </div>
          </form>
        </ValidationObserver>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
name: "modalAddCycle";
export default {
  data() {
    return {
      date_loading: new Date(),
      chicken_population: "",
      clean_up: "",
      date_harvest: "",
      date_manure_collection: "",
      date_cleaning: "",
      date_disinfection: "",
      date_rest: ""
    };
  },
  methods: {
    ...mapActions(["addCycle"]),
    createCycle() {
      this.addCycle({
        date_loading: moment(this.date_loading).format("YYYY-MM-DD"),
        chicken_population: this.chicken_population,
        clean_up: this.clean_up,
        date_harvest: moment(this.date_loading).format("YYYY-MM-DD"),
        date_manure_collection: moment(this.date_loading).format("YYYY-MM-DD"),
        date_cleaning: moment(this.date_loading).format("YYYY-MM-DD"),
        date_disinfection: moment(this.date_loading).format("YYYY-MM-DD"),
        date_rest: moment(this.date_loading).format("YYYY-MM-DD")
      })
        .then(response => {
          toast.fire({
            type: "success",
            title: "Create cycle successfully!"
          });
          console.log()
          $("#modalAddCycle").modal("hide");
        })
        .catch(error => {
          swal.fire({
            type: "error",
            title: "There was something wrong!",
            text: error.response.data.message,
            showConfirmButton: false,
            timer: 3000
          });
        });
    }
  },
  computed: {
    dateHarvest() {
      this.date_harvest = moment(this.date_loading)
        .add(this.clean_up, "days").format("MM/DD/YYYY");
      return this.date_harvest;
    },
    dateManureCollection() {
      this.date_manure_collection = moment(this.date_harvest)
        .add(2, "days").format("MM/DD/YYYY")
      return this.date_manure_collection;
    },
    dateCleaning() {
      this.date_cleaning = moment(this.date_harvest)
        .add(9, "days").format("MM/DD/YYYY")
      return this.date_cleaning;
    },
    dateDisinfection() {
      this.date_disinfection = moment(this.date_harvest)
        .add(10, "days").format("MM/DD/YYYY")
      return this.date_disinfection;
    },
    dateRest() {
      this.date_rest = moment(this.date_harvest)
        .add(20, "days").format("MM/DD/YYYY")
      return this.date_rest;
    }
  }
};
</script>

---

api.php

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});
Route::apiResources(['cycle' => 'API\CycleController']);

---

web.php

Route::get('/{any?}', function (){
    return view('layout');
})->where('any', '^(?!api\/)[\/\w\.-]*');

---

您需要一个passport令牌来进行javascript身份验证，我引述一下：您所需要做的就是将CreateFreshApiToken中间件添加到您的app/Http/Kernel.php文件中的web中间件组中：

'web' => [
    // Other middleware...
    \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class,
],

有关更多详细信息，请参阅

---

注意：确保用户模型使用

Laravel\Passport\HasApiTokens

trait

不确定您的问题是否相同，但Laravel repo中有一个关于API身份验证的类似错误的PR，这可能会有所帮助

说明中列出了原始问题和解释，但这里有一个摘要：

好的，我已经研究过了，我非常确定这与JSON或AuthenticationException的处理无关，因为AuthenticationException甚至从未抛出过。尝试转储$request->expectsJson（）-是否返回true？可能是的

这条线确实是问题所在。当父级尝试构造异常时调用它：

但是默认情况下登录路由不存在，因此路由（'login'）抛出InvalidArgumentException

即使在新的Laravel安装中也会出现此错误：

laravel新身份验证测试

cd认证测试

php工匠服务

然后

curl-H“接受：应用程序/json”http://localhost:8000/api/user

你会看到同样的例外

这个bug似乎是在laravel中引入的/laravel@a14e623.

解决方法：添加名为“login”的路由或从中间件中删除对

route（'login'）

的调用

---

发布与url相对应的路由和控制器代码

/cycle

这很可能是后端问题，因此我们需要查看该代码。我添加了后端代码仅用户模型具有

Laravel\Passport\HasApiTokens

？

Route::get('/{any?}', function (){
    return view('layout');
})->where('any', '^(?!api\/)[\/\w\.-]*');

'web' => [
    // Other middleware...
    \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class,
],

throw new AuthenticationException(
    'Unauthenticated.', $guards, $this->redirectTo($request)
);