使用 Laravel 护照的 Nuxt Auth 登录 - PHP

在这篇文章中，我们将探讨如何使用 Laravel 护照实现 Nuxt Auth 登录。Laravel 护照是一个为 Laravel 应用提供身份认证的库，它可以快速集成到 Nuxt 项目中。

我们将通过以下步骤来实现：

1. 安装 Laravel Passport
2. 创建 API 认证路由
3. 配置 Nuxt Auth
4. 编写登录/注册页面
5. 实现登录和注销功能

1. 安装 Laravel Passport

Laravel Passport 是一个官方的 OAuth2 服务器实现，它为你的 Laravel 应用程序提供了完整的 OAuth2 服务器实现。你可以使用以下命令安装 Laravel Passport：

composer require laravel/passport

安装完成后，运行以下命令完成 Laravel Passport 的安装：

php artisan passport:install

这个命令将生成客户端密钥和访问令牌，它们将用于保护 API 路由。

2. 创建 API 认证路由

在 Laravel 中创建一个 API 认证路由非常简单。打开 routes/api.php 文件，并添加以下路由：

Route::prefix('auth')->group(function () {
    Route::post('register', [AuthController::class, 'register']);
    Route::post('login', [AuthController::class, 'login']);
    Route::middleware('auth:api')->post('logout', [AuthController::class, 'logout']);
});

以上代码将创建一个前缀为 /auth 的路由组，并定义了注册、登录和注销路由。我们稍后将在 AuthController 文件中实现这些路由。

3. 配置 Nuxt Auth

现在，我们需要将 Nuxt Auth 配置与我们的 API 路由集成。我们可以通过在 Nuxt 项目的 nuxt.config.js 文件中添加以下代码来实现：

modules: [
  '@nuxtjs/auth-next'
],
auth: {
  strategies: {
    laravelPassport: {
      url: 'http://example.com',
      client_id: 'your-app-id',
      client_secret: 'your-app-secret',
      grant_type: 'password',
      scope: '*'
    }
  }
}

请替换 url、client_id 和 client_secret 为你的实际值。现在我们已经准备好在 Nuxt 中编写登录/注册页面了。

4. 编写登录/注册页面

要编写登录/注册页面，请先创建一个名为 pages/auth/login.vue 的文件。在该文件中，我们可以使用 Nuxt Auth 提供的表单组件来轻松地实现登录：

<template>
  <form @submit.prevent="login">
    <input type="text" v-model="username" placeholder="用户名" />
    <input type="password" v-model="password" placeholder="密码" />
    <button type="submit">登录</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async login() {
      const { data } = await this.$auth.loginWith('laravelPassport', {
        data: {
          username: this.username,
          password: this.password
        }
      })

      this.$router.push('/')
    }
  }
}
</script>

现在，我们已经可以提交表单来实现登录了。我们也可以创建一个类似的注册页面 pages/auth/register.vue。

5. 实现登录和注销功能

我们已经创建了登录和注册页面，但是我们还需要在 Laravel 中实现这些功能。我们将在 AuthController 文件中实现这些功能：

use Illuminate\Foundation\Auth\AuthenticatesUsers;
use Illuminate\Foundation\Auth\RegistersUsers;

class AuthController extends Controller
{
    use AuthenticatesUsers, RegistersUsers;

    public function register(Request $request)
    {
        $this->validator($request->all())->validate();
        $user = $this->create($request->all());
        $token = $user->createToken('API Token')->accessToken;
        return response()->json(['token' => $token]);
    }

    public function login(Request $request)
    {   
        $this->validate($request, [
            'username' => 'required|string',
            'password' => 'required|string'
        ]);

        $credentials = [
            'username' => $request->username,
            'password' => $request->password
        ];

        if (Auth::attempt($credentials)) {
             $user = Auth::user();
             $token = $user->createToken('API Token')->accessToken;
             return response()->json(['token' => $token]);
        }

        return response()->json(['error' => 'Unauthorized'], 401);
    }

    public function logout(Request $request)
    {
        $request->user()->token()->revoke();

        return response()->json(['success' => 'Logged out successfully']);
    }
}

以上代码定义了 register、login 和 logout 方法。当用户通过 register 方法注册后，它将返回一个访问令牌，该访问令牌将用于后续的 API 请求。当用户提交 login 表单时，它将验证凭据并创建新的访问令牌。最后，logout 方法将注销当前用户并撤销访问令牌。

现在，我们已经完成了 Laravel 护照与 Nuxt Auth 的集成和登录/注销功能的实现。现在我们可以在 Nuxt 中轻松地使用这些 API，以实现安全的身份验证和授权。