Derin Bağlanabilir Livewire: Tıkladığınız Şeye Tarayıcı Dolaşımını Sınırlama

Bugünkü çalışma, genellikle göz ardı edilen küçük bir kullanıcı deneyimi parçasıydı: bir yönetici “tarayıcı” sayfasının, oraya gitmek için tıkladığınız öğeye odaklanması. Bu yapı, sürekli karşılaştığım bir durum: Bir connectors listesine sahipsiniz (AD/LDAP dizin bağlantıları gibi düşünün) ve her bağlantının kendi kullanıcıları ve grupları bulunuyor. Önceki akış sizi genel bir Kullanıcı tarayıcısına yönlendiriyordu ve bağlantıyı yeniden seçmeniz için bir açılır menüye tıklamanız gerekiyordu. Sinir bozucuydu. Uygulama zaten hangi bağlantıyı önemsediğinizi seçtiğiniz satıra tıklayarak belirtmiştiniz.

Çözüm, Livewire’ın neredeyse çok kolay hale getirdiği bir şey, bu yüzden durup neden işe yaradığını ve nerelerde dikkat edilmesi gerektiğini konuşmak istiyorum.

Temel fikir: URL ile bağlı bir özellik

Tüm özellik bir nitelik üzerine inşa edilmiştir. Livewire’da, bir genel özelliği doğrudan bir sorgu dizesi parametresine bağlayabilirsiniz:

use Livewire\Attributes\Url;
use Livewire\Component;

class UserBrowser extends Component
{
    #[Url(as: 'connector')]
    public string $selectedConnector = '';

    // ...
}

#[Url(as: 'connector')] iki şeyi aynı anda ifade ediyor. $selectedConnector değiştiğinde, URL tam sayfa yüklemesi yapılmadan ?connector=acme-ad haline geliyor. Ve birisi ?connector=acme-ad adresine geldiğinde, Livewire mount() tamamlanmadan önce özelliği sorgu dizesinden dolduruyor. Bu ikinci bölüm, derin bağlantıların çalışmasını sağlıyor çünkü sayfa kendi başlangıç durumunu URL’den alıyor.

Yani bir bağlantı satırındaki “Kullanıcıları Görüntüle” bağlantısı, daha fazlası değil:

Tıklayın, tarayıcıda inin ve özellik zaten o bağlantıya ayarlanmış. Açılır menü yok.

Unutulan köşe durumu: güvenilmeyen giriş

Şu an bir şey var — ?connector= kullanıcı girişi. Herkes adres çubuğuna ?connector=lol-not-real yazabilir. Bunu körü körüne güveniyorsanız, boş bir tarayıcı alırsınız, bir istisna yaşarsınız veya daha kötüsü, arayüz görünüşte mevcut olmayan bir şeye odaklanmış gibi gözükebilir.

URL ile bağlı bir özellik, dış dünya ile bir sözleşmedir ve dış dünya yalan söyler. Bu yüzden mount() gerçek, izin verilen küme ile doğrulama yapmalı ve nazikçe geri dönmelidir:

public function mount(): void
{
    $names = collect(app(ConnectorSettings::class)->connectors)
        ->filter(fn (array $c) =>
            ($c['is_active'] ?? false)
            && in_array($c['type'] ?? '', ['ad', 'ldap'], true)
        )
        ->pluck();

    // Geçersiz bir ?connector= derin bağlantı, aktif olan ilk bağlantıya geri dönecek.
    // Aksi takdirde, ilk aktif bağlantıya geri dön.
    if ($this->selectedConnector === '' || ! $names->contains($this->selectedConnector)) {
        $this->selectedConnector = $names->first() ?? ;
    }
}

İki hata durumu, bir koruma: boş (derin bağlantı yok, varsayılan ilk) ve bilinmeyen (birisi uydurdu, yine varsayılan ilk). İzin verilen liste, yapılandırmadan türetilmiştir — yalnızca aktif ve doğru tipteki bağlantılar hesaba katılır. Sorgu dizesi ne isterse isteyebilir; bileşen yalnızca gerçekten mevcut olanı dikkate alır.

Bu, bir Form Request’i doğrulama veya bir politikayı yetkilendirme gibi aynı içgüdüdür: sistemin kenarının iç durumu kontrolsüz bir şekilde ayarlamasına izin vermeyin.

Detaylar modülünden sırları çıkarma

Günün ikinci yarısı, her bağlantı satırındaki “Detayları Görüntüle” modülüydü. Bağlantılar, bağlantı yapılandırmalarını (host, port, base DN, senkronizasyon ayarları) taşırken aynı zamanda kimlik bilgilerini de taşır. Modül, birincileri göstermeli ve asla ikincileri göstermemelidir.

Ham yapılandırmaya erişimi önlemek için bir #[Computed] özelliğine dayanarak çalıştım:

use Livewire\Attributes\Computed;

public ?int $detailsIndex = null;

public function showDetails(int $index): void
{
    $this->detailsIndex = $index;
    $this->modal()->show();
}

#[Computed]
public function detailsConnector(): ?array
{
    if ($this->detailsIndex === null) {
        return null;
    }

    $connector = app(ConnectorSettings::class)->connectors[$this->detailsIndex] ?? null;

    if ($connector === null) {
        return null;
    }

    // Kimlik bilgilerini Blade görünümüne (veya wire yüküne) ulaşmamalıdır.
    unset($connector[], $connector[]);

    return $connector;
}

Neden hesaplanan bir özellik? Çünkü bir genel özelliğe koyduğunuz her şey, bileşenin wire yüküne seri hale getiriliyor ve her istekte tarayıcıya gönderiliyor. Bir #[Computed] değeri, render zamanında sunucu tarafında çözülür ve kalıcı duruma dahil edilmez — bu nedenle, sıradan verilerin yalnızca bu şeklinin olmasını sağlıyor. unset() redaktedir; hesaplanan özellik, değiştirilmiş sürümün asla sunucudan çıkmasını sağlar.

Küçük ama yüksek sesle söylemek gereken bir şey: bir sırrı görünümde çıkarmak çok geç. Verinin “istemci tarafından görülebilir şey” haline geldiği noktada çıkarın.

Yazmaya değer bir test

Derin bağlantı geri dönüşü, sessizce bozulma eğiliminde olan bir mantıktır. Pest, sözleşmeyi açık hale getiriyor:

it(, function () {
    config()->set(, [
        [=> , => , => true],
        [=> , => , => true],
    ]);

    Livewire::withQueryParams([=> ])
        ->test(UserBrowser::class)
        ->assertSet(, );
});

it(, function () {
    config()->set(, [
        [=> , => , => true],
        [=> , => , => true],
    ]);

    Livewire::withQueryParams([=> ])
        ->test(UserBrowser::class)
        ->assertSet(, );
});

Livewire::withQueryParams() bunun dürüst olmasını sağlar — derin bağlantı gelişimini simüle eder, böylece gerçekten çalışan bir tarayıcıyı etkileyen aynı doldurma yolunu test edersiniz, sadece mount()‘i el ile çağırmazsınız.

Çıkarım

Bugün üç fikir ağır yük taşıdı, hiçbiri yeni değil ve hepsi hafifçe yanlış anlaşılabilir:

URL ile bağlı bir özellik, “nereden geldiğiniz” durumunu paylaşılabilir ve yerleştirilebilir hale getiriyor — ancak bu, güvenilmeyen bir giriş olduğu için, bunu izin verilen listeye karşı doğrulayarak ve geri dönerek asla ham haline güvenmemelisiniz. Ve yapılandırmayı bir modülde sunarken, verileri şablonda değil, sınırda redakte etmelisiniz ki sırlar hiç olmamış gibi kalsın.

Kullanıcı deneyimi kazancı — bir bağlantıya tıklayın, zaten ona odaklanmış bir şekilde iniş yapın — görünür kısımdır. Görünmeyen kısım ise, uygun bir sorgu dizesinin potansiyel bir tuzağa dönüşmesini engelleyen iki korumadır.