Laravel vue 3 watch method not working

Hello. I'm trying to make Auth in modal

HandleInertiaRequest

public function share(Request $request): array
    {
        return [
            ...parent::share($request),
            'auth' => [
                'user' => $request->user(),
            ],
            'session' => session()->only(['requireAuth']),
            'ziggy' => fn () => [
                ...(new Ziggy)->toArray(),
                'location' => $request->url(),
            ],
        ];
    }

and i'm recieving data from merged data, but watcher not working. Can you help me to solve this?

<script setup>
import { Head, Link, usePage } from '@inertiajs/vue3';
import DialogModal from '../Components/DialogModal.vue';
import { ref, watch, computed } from 'vue';


const props = defineProps({
    canLogin: {
        type: Boolean,
    },
    canRegister: {
        type: Boolean,
    },
    laravelVersion: {
        type: String,
        required: true,
    },
    phpVersion: {
        type: String,
        required: true,
    },
    session: Object
});

const authModalIsOpen = ref(false);
const authModalMessage = ref('');
const authModalKey = ref(new Date().getTime().toString());



watch(() => props.session, (session) => {

        authModalIsOpen.value = true;
        authModalMessage.value = session?.requireAuth;
        authModalKey.value = new Date().getTime().toString();
    });



</script>

tykus

2 years ago

Level 104

I believe you need to force a deep watcher; otherwise you will only fire the callback whenever session value is replaced with a separate Object:

watch(
  () => props.session, 
  (session) => {
        authModalIsOpen.value = true;
        authModalMessage.value = session?.requireAuth;
        authModalKey.value = new Date().getTime().toString();
  },
  {deep: true}
);

mrguseynov

2 years ago

Level 1

@tykus no,its.not working. I have to resieve data that i'm not logged in and display modal window.

breeze auth middleware

<?php

namespace App\Http\Middleware;

use Illuminate\Auth\Middleware\Authenticate as Middleware;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Session;

class Authenticate extends Middleware
{
    /**
     * Get the path the user should be redirected to when they are not authenticated.
     */
    // protected function redirectTo(Request $request): ?string
    // {
    //     return $request->expectsJson() ? null : route('login');
    // }
    protected function redirectTo(Request $request): ?string
    {
        $reasons = [
            'recommendations.toggle' => 'Only authenticated users can recommend talks.',
            'followedAuthors.toggle' => 'Only authenticated users can follow authors',
            'followedCategories.toggle' => 'Only authenticated users can follow categories',
            'notes.update' => 'Only authenticated users can update notes.',
            'media.store' => 'Only authenticated users can upload images.',
        ];

        if (!$request->expectsJson()) {
            Session::flash('requireAuth', $reasons[$request->route()->getName()] ?? 'Only authenticated users can perform this action.');
            return url()->previous();
        }
    }
}

mrguseynov

2 years ago

Best Answer

Level 1

this helped me

watch(
    () => logSession,
    (session) => {
 
        authModalIsOpen.value = !!session?.requireAuth;
        authModalMessage.value = session?.requireAuth;
        authModalKey.value = new Date().getTime().toString();
    },
    { immediate: true }
);

Please or to participate in this conversation.