用户登出

上一节内容，我们完成了登录功能，这一节我们继续学习，实现用户登出功能。用户登出是网站基本的功能需求。

显示登录用户

我们虽然已经完成了登录，但是还没有显示网站登录用户的信息。一般的网站都会把用户昵称显示在网站顶部右侧，然后再加一个登出按钮。让我们回到 layout 组件，先显示我们登录的用户昵称

<!-- pc show -->
<div class="hidden md:block">
  <div class="flex items-center ml-4 md:ml-6">
    <button type="button" class="relative p-1 text-gray-400 bg-gray-800 rounded-full hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
      <span class="absolute -inset-1.5"></span>
      <span class="sr-only">View notifications</span>
      <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
      </svg>
    </button>

    <!-- 用户昵称显示 -->
    <div class="relative ml-3">
      <div class="flex gap-x-2">
        <button
          type="button"
          class="relative flex items-center max-w-xs text-sm bg-gray-800 rounded-full focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
          id="user-menu-button"
          aria-expanded="false"
          aria-haspopup="true">
          <span class="absolute -inset-1.5"></span>
          <span class="sr-only">Open user menu</span>
          <!-- 这里显示用户昵称 -->
          <span class="text-white">{{ auth()->user()?->name }}</span>
        </button>
        <!-- 退出按钮 -->
        <button
          type="button"
          class="relative flex items-center max-w-xs text-sm bg-gray-800 rounded-full focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
          id="user-menu-button"
          aria-expanded="false"
          aria-haspopup="true">
          <span class="text-white">退出</span>
        </button>
      </div>
    </div>
  </div>
</div>

在这里我们使用了 auth()->user()?->name 来获取当前登录用户的昵称，并将其显示在用户菜单中。这也是 Laravel 框架中自带的获取授权用户信息的方法全局助手函数。

INFO

auth()->user()?->name,这里我们使用 PHP 的新的语法 user()?->name，这个意思就是说，如果获取到登录用户了，则展示了用户名。省略了 if 判断

添加退出登录方法

回到 LoginController 控制器，添加一个 logout 方法，基本上登出都是使用这个命名，添加如下代码

public function logout()
{
    // 退出登录
    Auth::logout();

    // 退出登录之后跳转到某个页面
    return redirect('/login');
}

• 在Laravel中退出登录非常简单，使用 Auth::logout() 方法即可

• 登出之后跳转到某个页面，这里我们设定为 login 页面。可以根据实际选择跳转到哪个页面。

添加对应的路由

回到 routes/web.php web 路由，添加下面的代码

# 登出路由
Route::post('/logout', [\App\Http\Controllers\LoginController::class, 'logout']);

添加退出登录请求

刚才我们在页面已经添加了退出按钮，但那是无法进行工作的。由于我们使用 post 请求。在之前的章节我们提过，Laravel 的所有 Post 请求都需要 csrf 安全校验，所以我们再退出的时候还需要模拟一个表单的 POST 请求，修改如下。主要给退出添加一个表单请求即可

<!-- 退出按钮 -->
@if (auth()->user())
<form class="space-y-6" action="/logout" method="POST">
  <button
    type="submit"
    class="relative flex items-center max-w-xs text-sm bg-gray-800 rounded-full focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
    id="user-menu-button"
    aria-expanded="false"
    aria-haspopup="true">
    <span class="text-white">退出</span>
  </button>
  @csrf
</form>
@else
<a
  href="/login"
  type="button"
  class="relative flex items-center max-w-xs text-sm bg-gray-800 rounded-full focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
  id="user-menu-button"
  aria-expanded="false"
  aria-haspopup="true">
  <span class="text-white">登录</span>
</a>
@endif

点击退出，会看到跳转到了 Login 登录页面了。这样即完成了登出功能