Laravel 5.1 和 Angular JS 中的记住用户和忘记密码功能(JWT 身份验证)

作者:编程家 分类: laravel 时间:2025-04-28

Laravel 5.1 和 Angular JS 提供了一种强大的身份验证方式,即使用 JWT(JSON Web Token)来实现记住用户和忘记密码功能。JWT 是一种基于 Token 的身份验证机制,它允许用户在登录后通过一个 Token 来访问受保护的资源。

JWT 身份验证的原理

在使用 JWT 身份验证之前,我们需要先了解 JWT 的原理。JWT 由三部分组成:头部、载荷和签名。头部用于指定使用的算法和令牌类型,载荷包含了用户的信息,签名用于验证令牌的合法性。

当用户登录成功后,服务器会生成一个 JWT,并将其返回给客户端。客户端在后续的请求中需要在请求头中携带这个 JWT。服务器在接收到请求后,会校验这个 JWT 的合法性,并根据其中的用户信息进行相应的操作。

记住用户功能的实现

记住用户功能可以让用户在一段时间内保持登录状态,无需频繁输入用户名和密码。实现这个功能的关键是在生成 JWT 时设置过期时间。我们可以通过修改 Laravel 的配置文件来设置过期时间,默认为 60 分钟。

首先,我们需要安装并配置 Laravel 的 JWT 扩展包。在终端中运行以下命令来安装扩展包:

composer require tymon/jwt-auth

安装完成后,打开 `config/app.php` 文件,将以下两个服务提供者添加到 `providers` 数组中:

Tymon\JWTAuth\Providers\LaravelServiceProvider::class,

并将以下门面添加到 `aliases` 数组中:

'JWTAuth' => Tymon\JWTAuth\Facades\JWTAuth::class,

接下来,运行以下命令来生成 JWT 的密钥:

php artisan jwt:secret

然后,打开 `config/jwt.php` 文件,将 `'ttl' => 60` 修改为 `'ttl' => env('JWT_TTL', 60)`。

现在,我们可以在用户登录成功后生成 JWT 并返回给客户端。在登录接口的控制器方法中,可以使用以下代码生成 JWT:

php

use JWTAuth;

// ...

public function login(Request $request)

{

// 验证用户登录逻辑

$user = User::where('email', $request->email)->first();

if (!$user || !Hash::check($request->password, $user->password)) {

return response()->json(['error' => 'Invalid credentials'], 401);

}

$token = JWTAuth::fromUser($user);

return response()->json(compact('token'));

}

在客户端接收到 JWT 后,我们可以将其存储在本地,以便在后续的请求中使用。在 Angular JS 中,可以使用 `localStorage` 来实现:

javascript

$http.post('/login', credentials).then(function(response) {

localStorage.setItem('token', response.data.token);

});

忘记密码功能的实现

忘记密码功能允许用户通过提供注册时使用的邮箱来重置密码。实现这个功能的关键是发送包含重置密码链接的电子邮件,并在链接中包含一个临时的重置密码 Token。

首先,我们需要创建一个用于存储重置密码 Token 的数据库表。可以使用以下命令生成迁移文件:

php artisan make:migration create_password_resets_table --create=password_resets

然后,打开生成的迁移文件,添加以下字段:

php

$table->string('email')->index();

$table->string('token');

$table->timestamp('created_at')->nullable();

运行迁移命令来创建表:

php artisan migrate

接下来,我们需要创建一个发送重置密码邮件的逻辑。可以使用以下代码创建一个发送邮件的方法:

php

use Illuminate\Support\Facades\Mail;

use App\Mail\ResetPassword;

// ...

public function sendResetPasswordEmail(Request $request)

{

$user = User::where('email', $request->email)->first();

if (!$user) {

return response()->json(['error' => 'Email not found'], 404);

}

$token = app('auth.password.broker')->createToken($user);

Mail::to($user->email)->send(new ResetPassword($user, $token));

return response()->json(['message' => 'Reset password email sent']);

}

然后,创建一个用于发送重置密码邮件的 Mailable:

php

php artisan make:mail ResetPassword --markdown=emails.reset_password

在生成的 Mailable 类中,可以添加以下代码:

php

use Illuminate\Mail\Mailable;

class ResetPassword extends Mailable

{

use Queueable, SerializesModels;

public $user;

public $token;

public function __construct($user, $token)

{

$this->user = $user;

$this->token = $token;

}

public function build()

{

return $this->markdown('emails.reset_password');

}

}

最后,创建一个包含重置密码链接的邮件模板。在 `resources/views/emails` 目录下创建 `reset_password.blade.php` 文件,并添加以下代码:

html

@component('mail::message')

# Reset Password

Click the button below to reset your password:

@component('mail::button', ['url' => url('/reset-password/' . $token)])

Reset Password

@endcomponent

Thanks,

{{ config('app.name') }}

@endcomponent

在客户端,用户点击重置密码链接后会跳转到重置密码页面。在页面中,用户需要输入新的密码,并将重置密码 Token 一同提交给后端。后端可以使用以下代码来重置密码:

php

use Illuminate\Support\Facades\Password;

// ...

public function resetPassword(Request $request)

{

$credentials = $request->only('email', 'password', 'password_confirmation', 'token');

$response = Password::reset($credentials, function ($user, $password) {

$user->password = Hash::make($password);

$user->save();

});

if ($response != Password::PASSWORD_RESET) {

return response()->json(['error' => 'Invalid token'], 400);

}

return response()->json(['message' => 'Password reset successfully']);

}

通过使用 Laravel 5.1 和 Angular JS 中的 JWT 身份验证,我们可以实现记住用户和忘记密码的功能。记住用户功能可以让用户在一段时间内保持登录状态,而忘记密码功能可以让用户通过提供注册时使用的邮箱来重置密码。JWT 身份验证机制的简单实现,为开发者提供了一种简洁高效的身份验证方式。