Laravel, 비로그인 사용자 내비게이션 에러 해결 및 첫 화면 상단 메뉴 설정

이번 포스트에서는 다음 작업들을 진행해 보겠다.

1. 비로그인 사용자가 메뉴(내비게이션)에 접근하면 에러가 뜨는 문제 해결
2. 비로그인 사용자에게는 Dashboard 메뉴가 보이지 않도록 수정
3. welcome 페이지 수정하고 상단에 메뉴(내비게이션) 표시하기

뭔가 할 것들이 많아 보이지만, 이번 포스트는 복잡한 백엔드 로직을 다루지는 않는다.

이전 포스트

Laravel 페이지네이션, 글이 없는 페이지로 이동할 경우에는 404 에러 페이지 반환하기

라라벨 Livewire 페이지네이션 이용 중 URL 입력으로 글이 없는 빈 페이지 접근 시 404 에러를 반환하는 예외 처리 방법을 알아봅니다. currentPage와 isEmpty 메서드로 데이터를 검증하고 abort(404)를 적용하여 UI의 완성도를 높여보세요.

비로그인 유저가 메뉴(내비게이션)에 접근하면 에러가 뜨는 문제

비로그인 유저가 웹브라우저에 직접 '글 목록 페이지'나 '대시보드 페이지'의 URL을 입력해서 이동하려고 하면 이렇게 에러가 발생한다.

라라벨 Livewire 4 컴포넌트의 web.php 라우팅 설정

라라벨 Livewire 버전 4에서 web.php에 컴포넌트를 라우팅 하고 web 웹사이트 내비게이션 메뉴에 연결하는 방법을 정리합니다. pages:: 식별자를 통한 컴포넌트 자동 연결 구조와 PC 및 모바일 반응형 내비게이션 링크 추가 방법까지 정리했습니다.

이전에 이 포스트에서 비로그인 사용자도 글 목록 페이지에 접근이 가능하도록 라우팅 설정을 했었는데, 왜 에러가 나는 걸까?

위의 캡처 이미지를 보면 에러 메시지에 Attempt to read property "nickname" on null이라고 쓰여있다.

상단의 내비게이션 바에 로그인 한 사용자의 닉네임이 표시되어야 하는데, 비로그인 사용자는 표시할 닉네임 데이터가 없기 때문에 에러가 난 것이다.

resources/views/livewire/layout/navigation.blade.php

@auth
<!-- Settings Dropdown -->
<div class="hidden sm:flex sm:items-center sm:ms-6">
    <x-dropdown align="right" width="48">

        <!-- 생략 -->

    </x-dropdown>
</div>
@else
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
    <x-nav-link :href="route('login')">
        {{ __('Log in') }}
    </x-nav-link>
    <x-nav-link :href="route('register')">
        {{ __('Register') }}
    </x-nav-link>
</div>
@endauth

그럴 때는 이렇게 @auth, @else, @endauth 등의 Blade 디렉티브를 이용하면 된다.

위의 코드는 로그인 사용자에게는 본인의 닉네임과 드롭다운 메뉴가 보이도록 했고, 비로그인 사용자에게는 로그인과 회원가입 페이지로 이동하는 메뉴가 보이게 만든 것이다.

Laravel 드롭다운 메뉴에 Admin Panel 추가 및 디자인 변경

라라벨 상단 내비게이션 드롭다운에 Filament 관리자 패널 링크를 추가하고 로고 클릭 시 홈으로 이동하도록 경로를 설정합니다. SPATIE 권한 지시어로 관리자에게만 메뉴를 노출하고 리다이렉트 및 한글 다국어 처리까지 적용하는 가이드입니다.

이전에 이 포스트에서 Admin Panel로 이동하는 메뉴를 admin 역할의 사용자에게만 보이도록 @role('admin')과 @endrole로 감쌌던 것과 같은 것이다.

resources/views/livewire/layout/navigation.blade.php

<!-- Responsive Settings Options -->
<div class="pt-4 pb-1 border-t border-gray-200 dark:border-gray-600">
    @auth
    <div class="px-4">

        <!-- 생략 -->

    </div>

    <div class="mt-3 space-y-1">

        <!-- 생략 -->

    </div>
    @else
    <div class="space-y-1">
        <x-responsive-nav-link :href="route('login')">
            {{ __('Log in') }}
        </x-responsive-nav-link>
        <x-responsive-nav-link :href="route('register')">
            {{ __('Register') }}
        </x-responsive-nav-link>
    </div>
    @endauth
</div>

모바일 메뉴에도 똑같은 작업을 해줘야 한다.

여기까지 해야 더 이상 에러가 발생하지 않는다.

저장하고 웹사이트를 확인하면, 이제 에러가 발생하지 않는다.

비로그인 사용자에게는 로그인과 회원가입 페이지로 이동하는 링크가 뜨게 됐다.

비로그인 사용자가 메뉴(내비게이션)에 접근하면 에러가 뜨는 문제 해결 · 4th-avenue/laravel13-livewire@1f2b780 · GitHub

설명 없음

github.com

여기까지의 코드 수정은 이 깃허브 링크를 통해서 확인할 수 있다.

비로그인 사용자에게는 Dashboard 메뉴가 보이지 않도록 수정

위의 캡처 이미지를 보면, 비로그인 사용자에게도 내비게이션에 '대시보드' 메뉴가 표시되고 있다.

그리고 이걸 클릭하면 로그인 페이지로 이동한다.

확실히 이건 좀 비정상적인 UI이기 때문에 비로그인 사용자에게는 처음부터 '대시보드' 메뉴가 보이지 않도록 수정하자.

resources/views/livewire/layout/navigation.blade.php

<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
    @auth
    <x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')" wire:navigate>
        {{ __('Dashboard') }}
    </x-nav-link>
    @endauth
    <x-nav-link :href="route('articles.index')" :active="request()->routeIs('articles.*')" wire:navigate>
        {{ __('Articles') }}
    </x-nav-link>
</div>

마찬가지로 @auth, @endauth Blade 디렉티브를 이용하면 된다.

잊지 말고 모바일 내비게이션에도 '대시보드' 메뉴가 보이지 않도록 @auth, @endauth로 감싸주도록 하자.

비로그인 사용자에게는 Dashboard 메뉴가 보이지 않도록 수정 · 4th-avenue/laravel13-livewire@e7a0aa2 · GitHub

설명 없음

github.com

코드 수정은 이 깃허브 링크를 통해서 확인할 수 있다.

welcome 페이지 수정하고 상단에 메뉴(내비게이션) 표시하기

현재의 웹사이트 첫 화면(welcome.blade.php)이다.

이 페이지의 상단에 내비게이션이 표시되도록 수정할 거다.

welcome 페이지 수정하고 상단에 메뉴(내비게이션) 표시하기 · 4th-avenue/laravel13-livewire@d15cce9 · GitHub

설명 없음

github.com

이 코드 수정은 블로그에서 설명하기에는 코드가 많으니, 그냥 깃허브 링크로 대신하겠다.

welcome.blade.php가 layouts/app.blade.php 안으로 들어가도록 수정해서 상단에 내비게이션이 표시되도록 했다.

그리고 welcome.blade.php 상단의 Laravel 로고와 Log in (로그인)・Register (회원가입) 메뉴를 삭제했다. (내비게이션에 이미 있기 때문에 중복되니까)

배경 이미지도 같이 삭제했다.

오늘의 과정을 통해, 이제 로그인을 하지 않은 사용자도 글을 읽을 수 있는 웹사이트로 바뀌었다.

다음 포스트

Laravel Livewire, 개별글 표시하기 (라우트 모델 바인딩)

라라벨 Livewire 4에서 글 목록의 제목을 클릭해 개별 게시글 상세 페이지로 이동하는 기능을 구현합니다. web.php 라우팅 설정, 그리고 라우트 모델 바인딩 개념과 작성자 쿼리 최적화 로직까지 핵심 위주로 알기 쉽게 정리했습니다.