Angular 中如何使用 JWT 实现密码重置-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，安全性一直是非常重要的问题。而可能会出现密码泄露的情况，因此密码重置也成为一个非常关键的功能。在本文中，我们将介绍如何使用 JWT（JSON Web Tokens）在 Angular 应用中实现密码重置功能。

JWT（JSON Web Tokens）

JSON Web Tokens（JWT）是一种安全的认证方式，它基于 JSON 格式的 Web Token 标准（RFC 7519）。JWT 将 JSON 数据进行加密存储，确保在数据传输和存储过程中不会被篡改。通常用于身份验证和授权，具有不需要存储在服务器上的优势。

JWT 由三部分组成：

Header（头部）：包含加密算法和 token 类型
Payload（载荷）：包含 token 数据，以 key-value 的形式存储
Signature（签名）：通过将头部和载荷加密，通过秘钥得到签名，从而确保 token 数据不会篡改

密码重置的流程

在实现密码重置之前，我们需要先理解密码重置的流程。一般而言，密码重置的过程分为以下几步：

用户点击“忘记密码”链接，跳转到密码重置页面
用户输入账号或邮箱，点击发送验证码按钮
后台发送验证码至用户的邮箱或手机
用户输入收到的验证码和新密码，点击确认修改按钮
后台验证验证码和账号信息，确认无误后将新密码保存至数据库

了解了密码重置流程后，下面我们就可以开始介绍如何使用 JWT 实现密码重置功能。

前端实现

在前端实现中，我们需要先生成一个包含用户信息的 token，然后通过邮件或手机短信等方式发送给用户。用户在重置密码页面输入其账号、验证码以及新密码，然后将这些信息发送给后台进行验证和修改。

生成 Token

生成 token 可以使用 jsonwebtoken 库，使用前需要先安装：

npm install jsonwebtoken --save

在生成 token 时，需要先定义 payload，其中应包含用户的账号信息。然后通过 jwt.sign() 方法加密 payload，生成 token。示例代码如下：

import * as jwt from 'jsonwebtoken';

const payload = { username: 'example' };
const secret = 'your-secret-key';

const token = jwt.sign(payload, secret, { expiresIn: '15m' });
console.log(token);

在上面的示例中，我们将用户名 example 存入 token 的 payload 中，使用 secret 进行加密，过期时间为 15 分钟。如果需要对 token 进行解密，使用 jwt.verify() 方法，并传入 secret，示例代码如下：

const decoded = jwt.verify(token, secret);
console.log(decoded);

实现密码重置页面

在实现密码重置页面时，我们需要通过 @angular/forms 包中的 FormGroup 创建一个表单，然后添加用户名、验证码、新密码等表单项。用户输入完成后，点击重置密码按钮，发送表单数据至后台进行验证和修改。示例代码如下：

// www.javascriptcn.com code example
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-reset-password',
  templateUrl: './reset-password.component.html',
  styleUrls: ['./reset-password.component.scss']
})
export class ResetPasswordComponent implements OnInit {
  form: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.form = this.fb.group({
      username: ['', Validators.required],
      code: ['', Validators.required],
      password: ['', Validators.required],
      confirmPassword: ['', Validators.required],
    });
  }

  resetPassword() {
    if (this.form.valid) {
      // TODO: 发送表单数据至后台进行验证和修改
    }
  }
}

发送表单数据至后台

在发送表单数据时，我们需要将表单项数据和 token 一起发送至后台。可以使用 HttpClient 发送 POST 请求，在请求头中添加 token。示例代码如下：

// www.javascriptcn.com code example
import { HttpClient, HttpHeaders } from '@angular/common/http';

resetPassword() {
  if (this.form.valid) {
    const formData = this.form.value;
    const token = getToken(); // 获取 token

    const headers = new HttpHeaders({
      'Content-Type': 'application/json',
      Authorization: `Bearer ${token}`
    });

    this.http.post('/api/reset-password', formData, {
      headers,
    }).subscribe(resp => {
      console.log(resp);
    });
  }
}

后端实现

在后台实现中，我们需要对收到的请求进行验证和修改。在认证 token 时，需要使用与前端相同的 secret，确保 token 数据的一致性。在验证密码重置请求时，需要与后台存储的验证码进行比较，确保用户提交的验证码正确。示例代码如下：

// www.javascriptcn.com code example
import * as jwt from 'jsonwebtoken';

router.post('/reset-password', (req, res) => {
  const token = req.headers.authorization.replace('Bearer ', '');
  const secret = 'your-secret-key';

  try {
    const decoded = jwt.verify(token, secret);
    const username = decoded.username;

    const formData = req.body; // 获取表单数据
    const code = getCodeFromDatabase(username); // 从数据库中获取验证码

    if (formData.code === code) {
      savePasswordToDatabase(username, formData.password); // 将新密码保存至数据库
      res.status(200).send({ message: 'Password updated.' });
    } else {
      res.status(400).send({ message: 'Invalid code.' });
    }
  } catch (error) {
    res.status(401).send({ message: 'Invalid token.' });
  }
});

结语

以上就是使用 JWT 实现密码重置功能的详细介绍。通过使用 JWT 和前后端分离的开发模式，我们可以大幅提高应用的安全性和用户体验。如果您还没有尝试过使用 JWT，那么我们强烈建议您了解并使用它。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d69359a941bf7134c5d519

Angular 中如何使用 JWT 实现密码重置