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

Question

[Arthurysh]

Пытаюсь в профиле вывести данные пользователя, но получаю {"message":"Unauthenticated."}, но по факту я залогинен. Так же, после выхода, при попытки снова зайти получаю ошибку 422.

user.js

import Api from "./Api";
import Csrf from "./Csrf";

export default {
  async register(form) {
    await Csrf.getCookie();

    return Api.post("/Registration", form);
  },

  async login(loginform) {
    await Csrf.getCookie();

    return Api.post("/Login", loginform);
  },

  async logout() {
    await Csrf.getCookie();

    return Api.post("/Logout");
  },

  auth() {
    return Api.get("/user");
  }
};

Csrf.js

import Api from "./Api";
import Cookie from "js-cookie";

export default {
  getCookie() {
    let token = Cookie.get("XSRF-TOKEN");

    if (token) {
      return new Promise(resolve => {
        resolve(token);
      });
    }

    return Api.get("/csrf-cookie");
  }
};

LoginController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Validation\ValidationException;

class LoginController extends Controller
{
    public function login(Request $request)
    {
        $request->validate([
            'email' => ['required'],
            'password' => ['required']
        ]);

        if (Auth::attempt($request->only('email', 'password'))) {
            return response()->json(Auth::user(), 200);
        }

        throw ValidationException::withMessages([
            'email' => ['The provided credentials are incorrect.']
        ]);
    }

    public function logout()
    {
        Auth::logout();
    }
}

vue.js

template>
  <div class="sidebar-container">
    <div class="bread-crumbs">
      <div class="bread-crumb back-main-page">
        <router-link to="/">
        <img src="@/assets/backArrowProfile.png" alt="" />
          <a class="on-main-link" href="#">На главную</a>
          </router-link>
      </div>
    </div>
    <div class="user-profile-block">
      <div class="user-image">
        <img src="@/assets/testUserPhoto.png" alt="" />
      </div>
      <div class="user-info-block" v-if="user">
        <p class="user-name">{{ user.name }}</p>
        <p class="user-email">{{ user.email }}</p>
      </div>
    </div>
    <sidebar-menu
      :userRole="userRole"
      @activateItemMenu="sendActiveItemId"
    ></sidebar-menu>
  </div>
</template>

<script>
import User from "@/apis/User";
import SidebarMenu from "@/components/ProfilePage/SidebarMenu.vue";

export default {
  data() {
    return {
      user: null
    }
  },
  components: { SidebarMenu },
  props: {
    userRole: {
      type: String,
      required: true,
    },
  },
  methods: {
    sendActiveItemId(itemMenuID) {
      this.$emit("activatedId", itemMenuID);
    },
  },
  mounted() {
     User.auth().then(response => {
       this.user = response.data;
     });
  },
};
</script>

api.php

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

Route::post('/Registration', 'RegisterController@register');
Route::post('/Login', 'LoginController@login');
Route::post('/Logout', 'LoginController@logout');

Answer 1

[Aetae]

Не вижу где у тебя login происходит.
В любом случае подозреваю, что mounted у тебя происходит раньше чтем getCookie() сработает, а потому отправляет запрос до авторизации. Если это так, то подожди рисовать компонент\запрашивать юзера, пока не убедишься в авторизации.

Мелкая придирка:

new Promise(resolve => {
  resolve(token);
});

->
Promise.resolve(token);

Comments

[Arthurysh]

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

[Aetae]

Arthurysh, ещё раз: я НЕ вижу где у тебя происходит login.

[Arthurysh]

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

[Aetae]

Arthurysh, laravel не знаю - это Api - оно твоё, или из коробки? Если твоё, то передаёшь ли ты параметр withCredentials \ credentials: 'include', чтоб запрос собственно включал куку?