Перенес все axios-запросы в store

resources/store/user.js

@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+import axios from "axios";
 
 export const useUserStore = defineStore('user', {
     state: () => ({
@@ -15,5 +16,73 @@ export const useUserStore = defineStore('user', {
             this.token = token;
             localStorage.setItem('auth_token', token);
         },
+        checkUser(){
+            axios.get(
+                '/api/auth/user',
+                {
+                    headers:
+                        {
+                            Authorization: `Bearer ${this.token}`,
+                            token: this.token
+                        }
+                }
+            ).then((res) => {
+                this.setUser(res.data);
+            }).catch((error)=>{
+                this.nullifyUser();
+            })
+        },
+        async login(email, password, rememberMe){
+            await axios.post(
+                '/api/auth/login',
+                {
+                    'email': email,
+                    'password': password,
+                    'remember_me': rememberMe
+            }).then((res) => {
+                this.setUser(res.data.user);
+                this.setToken(res.data.accessToken);
+                return true;
+            }).catch((error)=>{
+                if (!error.response){
+                    return false;
+                }
+                return error.response.data.message;
+            })
+        },
+       async registration(login, email, password, repeatPassword){
+            await axios.post(
+                '/api/auth/register',
+                {'name': login,
+                    'email': email,
+                    'password': password,
+                    'c_password': repeatPassword
+                }).then((res) => {
+                this.setUser(res.data.user);
+                this.setToken(res.data.accessToken);
+                return true;
+            }).catch((error)=>{
+                if (!error.response){
+                    return false;
+                }
+                return error.response.data.message;
+            })
+        },
+        logout(){
+            axios.get('/api/auth/logout',
+                {
+                    headers:
+                        {
+                            Authorization: `Bearer ${this.token}`,
+                            token: this.token
+                        }
+                }
+            );
+            this.nullifyUser();
+        },
+        nullifyUser(){
+            this.setUser(null);
+            this.setToken(null);
+        }
     },
 })

resources/views/Auth/Login.vue

@@ -1,5 +1,4 @@
 <script>
-import axios from "axios";
 import {useUserStore} from "../../store/user.js";
 
 export default {
@@ -15,25 +14,23 @@ export default {
     }),
     methods: {
         loginAction(){
-            axios.post(
+            this.userStore.login(this.email, this.password, this.rememberMe).then((isLogged) => {
-                '/api/auth/login',
+                if (typeof isLogged == "boolean") {
-                {'name': this.login,
+                    if (isLogged){
-                    'email': this.email,
+                        this.errorMessage = '';
-                    'password': this.password,
+                        this.errorMessageContainerStyle = 'display: none;';
-                    'remember_me': this.rememberMe
+                        this.$router.push('/');
-                }).then((res) => {
+                    } else {
-                this.userStore.setUser(res.data.user);
+                        this.errorMessage = 'Authentication error';
-                this.userStore.setToken(res.data.accessToken);
+                        this.errorMessageContainerStyle = '';
-                this.$router.push('/');
+                    }
-            }).catch((error)=>{
+                } else if (typeof isLogged == "string") {
-                if (!error.response){
+                    this.errorMessage = isLogged;
-                    this.errorMessage = '';
+                    this.errorMessageContainerStyle = '';
-                    this.errorMessageContainerStyle = 'display: none;';
-                    return;
                 }
-                this.errorMessage = error.response.data.message;
+            });
-                this.errorMessageContainerStyle = '';
+
-            })
+
         }
     }
 }

resources/views/Auth/Registration.vue

@@ -1,5 +1,4 @@
 <script>
-import axios from "axios";
 import {useUserStore} from "../../store/user.js";
 
 export default {
@@ -16,20 +15,21 @@ export default {
     }),
     methods: {
         registrationAction(){
-            axios.post(
+            this.userStore.registration(this.login, this.email, this.password, this.repeatPassword).then((isRegistred)=>{
-                '/api/auth/register',
+                if (typeof isRegistred == "boolean") {
-                {'name': this.login,
+                    if (isRegistred){
-                    'email': this.email,
+                        this.errorMessage = '';
-                    'password': this.password,
+                        this.errorMessageContainerStyle = 'display: none;';
-                    'c_password': this.repeatPassword
+                        this.$router.push('/');
-            }).then((res) => {
+                    } else {
-                this.userStore.setUser(res.data.user);
+                        this.errorMessage = 'Registration error';
-                this.userStore.setToken(res.data.accessToken);
+                        this.errorMessageContainerStyle = '';
-                this.$router.push('/');
+                    }
-            }).catch((error)=>{
+                } else if (typeof isRegistred == "string") {
-                this.errorMessage = error;
+                    this.errorMessage = isRegistred;
-                this.errorMessageContainerStyle = '';
+                    this.errorMessageContainerStyle = '';
-            })
+                }
+            });
         }
     }
 }

resources/views/Welcome.vue

@@ -20,7 +20,6 @@
 </template>
 
 <script>
-import axios from "axios";
 import {useUserStore} from "../store/user.js";
 import {watch} from "vue";
 export default {
@@ -28,61 +27,23 @@ export default {
     data: () => ({
         cardTitle: 'Hello world!',
         isAuthenticated: false,
-        username: ''
+        username: '',
+        userStore: useUserStore()
     }),
     computed: {
         user() {
-            const authStore = useUserStore();
+            return this.userStore.user;
-            return authStore.user;
         },
     },
     methods: {
         async logout() {
-            try {
+            this.userStore.logout();
-                const authStore = useUserStore();
+            this.$router.push('/auth_options');
-                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');
-        const authStore = useUserStore();
+        watch(this.userStore, (newStore, oldStore)=>{
-        watch(authStore, (newStore, oldStore)=>{
             this.isAuthenticated = newStore.user !== null && newStore.user !== undefined;
             if (this.isAuthenticated) {
                 this.$router.push('/wishlist');
@@ -90,7 +51,7 @@ export default {
                 this.$router.push('/auth_options');
             }
         });
-        this.checkUser();
+        this.userStore.checkUser();
     }
 }
 </script>