Наконец понял как работает аутентификация

app/Http/Controllers/AuthController.php

@@ -39,6 +39,7 @@ class AuthController extends Controller
 
             return response()->json([
                 'message' => 'Successfully created user!',
+                'user' => $user,
                 'accessToken'=> $token,
             ],201);
         }
@@ -76,6 +77,7 @@ class AuthController extends Controller
 
         return response()->json([
             'accessToken' =>$token,
+            'user' => $user,
             'token_type' => 'Bearer',
         ]);
     }

resources/app.js

@@ -7,22 +7,25 @@ import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
 import '@mdi/font/css/materialdesignicons.css'
 import { createMemoryHistory, createRouter } from 'vue-router'
+import {createPinia} from "pinia";
 
 const vuetify = createVuetify({
     components,
     directives
 })
 
-import AuthButtons from './views/AuthButtons.vue'
+import AuthButtons from './views/Auth/AuthButtons.vue'
 import Login from './views/Auth/Login.vue'
 import Registration from './views/Auth/Registration.vue'
 import Welcome from './views/Welcome.vue'
+import Wishlist from "./views/Wishlist/Wishlist.vue";
 
 const routes = [
     { path: '/', component: Welcome },
     { path: '/auth_options', component: AuthButtons },
     { path: '/login', component: Login },
     { path: '/registration', component: Registration },
+    { path: '/wishlist', component: Wishlist },
 ]
 
 const router = createRouter({
@@ -30,4 +33,6 @@ const router = createRouter({
     routes,
 })
 
-createApp(App).use(vuetify).use(router).mount("#app")
+const pinia = createPinia()
+
+createApp(App).use(vuetify).use(router).use(pinia).mount("#app")

resources/store/user.js

@@ -1,14 +1,19 @@
 import { defineStore } from 'pinia'
 
 export const useUserStore = defineStore('user', {
-    state: () => {
+    state: () => ({
-        return { user: null }
+        user: null,
-    },
+        token: localStorage.getItem('auth_token') || null,
+    }),
     // could also be defined as
     // state: () => ({ count: 0 })
     actions: {
-        increment() {
+        setUser(user) {
-            this.count++
+            this.user = user;
+        },
+        setToken(token) {
+            this.token = token;
+            localStorage.setItem('auth_token', token);
         },
     },
 })

resources/views/Auth/AuthButtons.vue

@@ -5,7 +5,7 @@ export default {
 </script>
 
 <template>
-    <div class="d-flex flex-column justify-center align-center pa-3">
+    <div class="d-flex flex-column justify-center align-center pa-3 w-33">
         <router-link to="/login" class="w-100 ma-2">
             <v-btn class="w-100">
                 Вход

resources/views/Auth/Login.vue

@@ -22,11 +22,16 @@ export default {
                     'password': this.password,
                     'remember_me': this.rememberMe
                 }).then((res) => {
-                console.log(res);
+                this.userStore.setUser(res.data.user);
-                this.$cookie.set("keyName", keyValue, "expiring time")
+                this.userStore.setToken(res.data.accessToken);
                 this.$router.push('/');
             }).catch((error)=>{
-                this.errorMessage = error;
+                if (!error.response){
+                    this.errorMessage = '';
+                    this.errorMessageContainerStyle = 'display: none;';
+                    return;
+                }
+                this.errorMessage = error.response.data.message;
                 this.errorMessageContainerStyle = '';
             })
         }
@@ -35,7 +40,7 @@ export default {
 </script>
 
 <template>
-    <div class="d-flex flex-column justify-center align-center">
+    <div class="d-flex flex-column justify-center align-center w-33">
         <v-text-field class="w-100"
                       v-model="email"
                       label="E-mail"

resources/views/Auth/Registration.vue

@@ -1,9 +1,11 @@
 <script>
 import axios from "axios";
+import {useUserStore} from "../../store/user.js";
 
 export default {
     name: "Registration",
     data: () => ({
+        userStore: useUserStore(),
         valid: false,
         login: '',
         email: '',
@@ -21,7 +23,8 @@ export default {
                     'password': this.password,
                     'c_password': this.repeatPassword
             }).then((res) => {
-                console.log(res);
+                this.userStore.setUser(res.data.user);
+                this.userStore.setToken(res.data.accessToken);
                 this.$router.push('/');
             }).catch((error)=>{
                 this.errorMessage = error;
@@ -33,7 +36,7 @@ export default {
 </script>
 
 <template>
-    <div class="d-flex flex-column justify-center align-center">
+    <div class="d-flex flex-column justify-center align-center w-33">
         <v-text-field class="w-100"
                       v-model="login"
                       label="Логин"

resources/views/Welcome.vue

@@ -1,9 +1,17 @@
 <template>
     <v-card class="bg-gradient" style="height: 100%">
         <v-card-text class="d-flex justify-center align-center">
-            <v-card class="align-center justify-center h-auto w-33 card-bg">
+            <v-card class="align-center justify-center h-auto w-66 card-bg">
-                <v-card-title>Добро пожаловать в <router-link to="/auth_options" class="link-no-decor">Wishlist</router-link>!</v-card-title>
+                <v-card-title class="d-flex justify-space-between">
-                <v-card-text>
+                    <div>
+                        <span>Добро пожаловать в </span>
+                        <span><router-link :to="isAuthenticated ? '/wishlist' : '/auth_options'" class="link-no-decor">Wishlist</router-link>, </span>
+                        <span v-if="isAuthenticated">{{ this.user['name'] }}!</span>
+                        <span v-else>Гость!</span>
+                    </div>
+                    <span v-if="isAuthenticated" class="link-no-decor align-end" @click="logout">Выйти</span>
+                </v-card-title>
+                <v-card-text class="d-flex justify-center align-center">
                     <router-view/>
                 </v-card-text>
             </v-card>
@@ -13,19 +21,76 @@
 
 <script>
 import axios from "axios";
+import {useUserStore} from "../store/user.js";
+import {watch} from "vue";
 export default {
     name: "Welcome",
     data: () => ({
         cardTitle: 'Hello world!',
+        isAuthenticated: false,
         username: ''
     }),
+    computed: {
+        user() {
+            const authStore = useUserStore();
+            return authStore.user;
+        },
+    },
+    methods: {
+        async logout() {
+            try {
+                const authStore = useUserStore();
+                let token = authStore.token;
+                await axios.get('/api/auth/logout',
+                    {
+                        headers:
+                            {
+                                Authorization: `Bearer ${token}`,
+                                token: token
+                            }
+                    }
+                );
+                authStore.setUser(null);
+                authStore.setToken(null);
+                this.$router.push('/auth_options');
+            } catch (error) {
+                alert('Ошибка выхода');
+            }
+        },
+        checkUser(){
+            const authStore = useUserStore();
+            let token = authStore.token;
+            if (token){
+                axios.get(
+                    '/api/auth/user',
+                    {
+                        headers:
+                            {
+                                Authorization: `Bearer ${token}`,
+                                token: token
+                            }
+                    }
+                ).then((res) => {
+                    authStore.setUser(res.data);
+                }).catch((error)=>{
+                    authStore.setUser(null);
+                    authStore.setToken(null);
+                })
+            }
+        },
+    },
     mounted() {
         this.$router.push('/auth_options');
-        axios.get(
+        const authStore = useUserStore();
-            '/api/auth/user'
+        watch(authStore, (newStore, oldStore)=>{
-        ).then((res) => {
+            this.isAuthenticated = newStore.user !== null && newStore.user !== undefined;
-            console.log(res);
+            if (this.isAuthenticated) {
-        })
+                this.$router.push('/wishlist');
+            } else {
+                this.$router.push('/auth_options');
+            }
+        });
+        this.checkUser();
     }
 }
 </script>

resources/views/Wishlist/Wishlist.vue

@@ -0,0 +1,13 @@
+<script>
+export default {
+    name: "Wishlist"
+}
+</script>
+
+<template>
+    <v-label>Hello world!</v-label>
+</template>
+
+<style scoped>
+
+</style>