使用Angular和Node进行基于令牌的身份验证

基于令牌的身份验证是一种广泛采用的安全机制，允许应用程序在用户登录后进行身份验证和授权，在这个过程中，服务器会生成一个令牌，然后将其返回给客户端，客户端随后的每个请求都需要携带这个令牌，以证明其身份，在这个回答中，我们将使用Angular作为前端框架，Node.js作为后端服务器，以及JSON Web Tokens (JWT) 实现基于令牌的身份验证。

第一步：设置Node.js环境

确保你已经安装了Node.js和npm（Node包管理器），接下来，创建一个新的Node.js项目并初始化npm。

mkdir tokenauthentication
cd tokenauthentication
npm init y

安装Express作为我们的服务器框架和一些其他必要的依赖项：

npm install express jsonwebtoken bcryptjs cors

第二步：创建服务器和用户模型

创建一个server.js文件来设置Express服务器，并定义一个简单的用户模型用于存储用户名和哈希过的密码。

// server.js
const express = require('express');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');
const cors = require('cors');
const app = express();
app.use(cors());
let users = []; // 在真实的应用中，这将是一个数据库
app.post('/register', (req, res) => {
    const hashedPassword = bcrypt.hashSync(req.body.password, 8);
    users.push({
        id: Date.now().toString(),
        name: req.body.name,
        password: hashedPassword,
    });
    res.status(201).send();
});
app.listen(3000, () => console.log('Server running on port 3000'));

第三步：实现登录和令牌生成

继续在server.js中添加登录路由和令牌生成逻辑。

//...之前的代码...
app.post('/login', (req, res) => {
    const user = users.find((u) => u.name === req.body.name);
    if (user == null) {
        return res.status(400).send('Cannot find user');
    }
    try {
        if (bcrypt.compareSync(req.body.password, user.password)) {
            const accessToken = jwt.sign(user, process.env.ACCESS_TOKEN_SECRET);
            res.json({ accessToken: accessToken });
        } else {
            res.send('Not Allowed');
        }
    } catch {
        res.status(500).send();
    }
});

确保你设置了一个ACCESS_TOKEN_SECRET环境变量，它将被用来签名令牌。

第四步：创建Angular前端

生成新的Angular项目，并安装必要的依赖项：

ng new angularclient
cd angularclient
npm install @angular/common @angular/core @angular/forms @angular/http @angular/material @angular/platformbrowser @angular/platformbrowserdynamic @angular/router rxjs

第五步：实现Angular服务和组件

在Angular应用中，我们需要创建服务来处理与后端通信的逻辑，创建一个名为auth.service.ts的服务：

// src/app/auth.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
@Injectable({
  providedIn: 'root'
})
export class AuthService {
  login(userName: string, password: string) {
    return this.http.post<any>(http://localhost:3000/login, { name: userName, password })
      .pipe(map(user => {
        if (user && user.accessToken) {
          localStorage.setItem('currentUser', JSON.stringify(user));
        }
        return user;
      }));
  }
  logout() {
    localStorage.removeItem('currentUser');
  }
}

创建一个登录表单组件login.component.ts：

// src/app/login/login.component.ts
import { Component } from '@angular/core';
import { AuthService } from '../auth.service';
@Component({
  selector: 'applogin',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  userName: string;
  password: string;
  constructor(private authService: AuthService) {}
  login() {
    this.authService.login(this.userName, this.password);
  }
}

确保你的login.component.html包含了一个表单，该表单可以输入用户名和密码，并且有一个按钮调用login()方法。

第六步：集成和测试

现在你可以运行Node.js服务器node server.js，然后在另一个终端窗口启动Angular开发服务器ng serve，打开浏览器访问http://localhost:4200/login，你应该可以看到登录界面，输入注册过的用户信息，然后登录，成功登录后，前端会保存令牌，并在后续请求中使用它。

这个简单的示例展示了如何使用Angular和Node.js实现基于令牌的身份验证，在真实场景中，你可能还需要增加更多的安全措施，例如HTTPS、错误处理、刷新令牌等，不过，这个基础版本的实现应该提供了一个很好的起点。