При попытке вывести имя пользователя получаю {"message":"Unauthenticated."}. Как исправить?

<template>
  <div class="container-auth">
    <div class="back-to-main-page">
      <img src="@/assets/arrow-left.svg" />
      <a href="#">На главную</a>
    </div>
    <div class="right-side-block">
      <div class="right-side-block-items">
        <div v-if="this.isElVisible">
          <div class="registration-block">
            <h3 class="right-side-block-title">Welcome</h3>
            <div class="input-registration-block">
              <my-input
                :placeholderValue="'Имя'"
                id="firstNameField"
                @input="form.name = $event.target.value"
                v-bind:value="form.name"
              ></my-input>
              <span class="text-danger" v-if="errors.name">
                {{ errors.name[0] }}
              </span>
              <my-input
                :placeholderValue="'Фамилия'"
                id="lastNameField"
              ></my-input>
              <my-input
                :placeholderValue="'Номер телефона'"
                id="numberField"
              ></my-input>
              <my-input
                :placeholderValue="'Почта'"
                id="emailField"
                @input="form.email = $event.target.value"
                v-bind:value="form.email"
              ></my-input>
              <span class="text-danger" v-if="errors.email">
                {{ errors.email[0] }}
              </span>
              <my-input
                type="password"
                :placeholderValue="'Пароль'"
                id="passwordField"
                @input="form.password = $event.target.value"
                v-bind:value="form.password"
              ></my-input>
              <span class="text-danger" v-if="errors.password">
                {{ errors.password[0] }}
              </span>
              <my-input
                type="password"
                :placeholderValue="'Повторите пароль'"
                id="passwordField"
                @input="form.password_confirmation = $event.target.value"
                v-bind:value="form.password_confirmation"
              ></my-input>
              <span class="text-danger" v-if="errors.password_confirmation">
                {{ errors.password_confirmation[0] }}
              </span>
            </div>
            <div class="checkbox-registr">
              <my-check-box></my-check-box>
              <p>Я соглашаюсь с пользовательским соглашением</p>
            </div>
            <div class="input-registration-block-button">
              <my-button
                class="btn-registration-in-reg"
                @click.prevent="register"
                >Зарегестрироваться</my-button
              >
              <my-button class="btn-log-in-reg" @click="toggleElement"
                >Вход</my-button
              >
            </div>
          </div>
        </div>
        <div v-else >
          <div class="block-log-in">
            <h3 class="right-side-block-title">Welcome</h3>
            <div class="input-registration-block">
              <my-input
                :placeholderValue="'Логин'"
                id="passwordField"
                @input="loginform.email = $event.target.value"
                v-bind:value="loginform.email"
              ></my-input>
              <span class="text-danger" v-if="errors.email">
                {{ errors.email[0] }}
              </span>
              <my-input 
                type="password"
                :placeholderValue="'Пароль'"
                id="passwordField"
                @input="loginform.password = $event.target.value"
                v-bind:value="loginform.password"
              ></my-input>
              <span class="text-danger" v-if="errors.password">
                {{ errors.password[0] }}
              </span>
            </div>
            <div class="checkbox-registr">
              <my-check-box></my-check-box>
              <p>Запомнить меня</p>
            </div>
            <div class="input-registration-block-button">
              <my-button class="btn-log-in" @click.prevent="login"
                >Войти</my-button
              >
              <my-button class="btn-registration" @click="toggleElement"
                >Регистрация</my-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MyInput from "@/components/UI/MyInput.vue";
import MyButton from "@/components/UI/MyButton.vue";
import MyCheckBox from "@/components/UI/MyCheckBox.vue";
import User from "@/apis/User";

export default {
  components: {
    MyInput,
    MyButton,
    MyCheckBox,
    User,
  },
  props: {
    isRegistration: {
      type: Boolean,
      required: true,
    }
  },
  data() {
    return {
      form: {
        name: "",
        email: "",
        password: "",
        password_confirmation: "",
      },
      errors: [],

      loginform: {
        email: "",
        password: "",
      },

      isElVisible: this.isRegistration,
    };
  },
  methods: {
    toggleElement() {
      this.isElVisible = !this.isElVisible;
    },

    register() {
      User.register(this.form)
        .then(() => {
          this.$router.push('/Authorization');
        })
        .catch((error) => {
          if (error.response.status === 422) {
            this.errors = error.response.data.errors;
          }
        });
    },

    login() {
      User.login(this.form)
        .then(() => {
          this.$root.$emit("Login", true);
          localStorage.setItem("auth", "true");
          this.$router.push('/Profile'); 
        })
        .catch((error) => {
          if (error.response.status === 422) {
            this.errors = error.response.data.errors;
          }
        });
    },
  },
};
</script>

При попытке вывести имя пользователя получаю {"message":"Unauthenticated."}. Как исправить?

После того как я зарегался у меня нормально входит, все работает, но если я выйду и повторно попытаюсь зайти получаю 422.