When the current user is [email protected] or isn’t [email protected] the file still is being uploading.

I am expecting whether the current user email matches with [email protected] file will be uploaded otherwise won’t be uploaded. In my FileUpload.vue:

<template>
    <MenuItem v-slot="{ active }">
        <a href="#" class="text-gray-700 block px-4 py-2 text-sm relative">
            Upload Files
            <input @change="onChange" type="file" class="absolute left-0 sm:top-0 bottom-0 sm:right-0 cursor-pointer opacity-0" multiple>
        </a>
    </MenuItem>
</template>

<script>
import { emitter, FILE_UPLOAD_STARTED, showErrorDialog } from "@/event-bus.js";
import { MenuItem } from "@headlessui/vue";
import axios from 'axios';

export default {
    components: {
        MenuItem
    },
    data() {
        return {
            userEmail: '',
            showUploadButton: false,
            errorFetchingEmail: false
        };
    },
    mounted() {
        this.fetchUserEmail();
    },
    methods: {
        fetchUserEmail() {
            axios.get('/api/user')
                .then(response => {
                    this.userEmail = response.data.email;
                    if(this.userEmail === '[email protected]'){
                        this.showUploadButton = true;
                    }
                })
                .catch(error => {
                    console.error('Error fetching user email:', error);
                    this.errorFetchingEmail = true;
                });
        },
        onChange(ev) {
            if (this.userEmail === '[email protected]' &&  this.showUploadButton === true) {
                emitter.emit(FILE_UPLOAD_STARTED, ev.target.files);
            } else {
                showErrorDialog("File upload not allowed for this user.");
            }
        }
    }
};
</script>

And my api.php, when I upload the file as [email protected] the error “File upload not allowed for this user.” shows and Error fetching user email……shows

<?php

use IlluminateHttpRequest;
use IlluminateSupportFacadesRoute;

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

//new
//Route::middleware('auth:sanctum')
//    ->get('/user-email', [UserController::class, 'getUserEmail']);
Route::middleware('auth:sanctum')
    ->get('/user', function (Request $request) {
        return $request->user()->email;
    });