使用 node，express，jwt，angular，mysql 写个有login功能的程序

好的，我可以给你提供一个简单的 Node.js、Express、JWT、Angular 和 MySQL 实现的登录功能的示例程序。

前端代码：

<!-- login.component.html -->

<div class="container">
  <h2>Login</h2>
  <form [formGroup]="form" (ngSubmit)="onSubmit()">
    <div class="form-group">
      <label for="username">Username</label>
      <input type="text" class="form-control" formControlName="username" id="username" placeholder="Enter username">
    </div>
    <div class="form-group">
      <label for="password">Password</label>
      <input type="password" class="form-control" formControlName="password" id="password" placeholder="Enter password">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

// login.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AuthService } from '../services/auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  form: FormGroup;

  constructor(private fb: FormBuilder, private authService: AuthService) {}

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

  onSubmit() {
    const { username, password } = this.form.value;
    this.authService.login(username, password);
  }
}

// auth.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import { environment } from '../../environments/environment';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { JwtHelperService } from '@auth0/angular-jwt';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private apiUrl = environment.apiUrl;
  private jwtHelper = new JwtHelperService();

  constructor(private http: HttpClient, private router: Router) {}

  login(username: string, password: string): Observable<{ token: string }> {
    return this.http
      .post<{ token: string }>(`${this.apiUrl}/api/auth/login`, {
        username,
        password
      })
      .pipe(
        tap(res => {
          localStorage.setItem('token', res.token);
        })
      );
  }

  isLoggedIn(): boolean {
    const token = localStorage.getItem('token');
    return !this.jwtHelper.isTokenExpired(token);
  }

  logout() {
    localStorage.removeItem('token');
    this.router.navigate(['/login']);
  }
}

后端代码：

// app.ts

import express from 'express';
import cors from 'cors';
import router from './routes';

const app = express();

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.use('/api', router);

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server started on port ${port}`);
});

// routes/index.ts

import express from 'express';
import authRouter from './auth';

const router = express.Router();

router.use('/auth', authRouter);

export default router;

// routes/auth.ts

import express from 'express';
import jwt from 'jsonwebtoken';
import bcrypt from 'bcrypt';
import db from '../db';

const router = express.Router();

router.post('/login', async (req, res) => {
  const { username, password } = req.body;

  const [user] = await db.query('SELECT * FROM users WHERE username = ?', [
    username
  ]);

  if (!user) {
    return res.status(401).send('Invalid username or password');
  }

  const passwordMatch = await bcrypt.compare(password, user.password);

  if (!passwordMatch) {
    return res.status(401).send('Invalid username or password');
  }

  const token = jwt.sign({ userId: user.id }, process.env.JWT_SECRET, {
    expiresIn: '1h'
  });

  res.json({ token });
});

export default router;

// db.ts

import mysql from 'mysql2/promise';
import dotenv from 'dotenv';

dotenv.config();

const pool = mysql.createPool({
  host: process.env.DB_HOST,
  user: process.env.DB_USER,
  password: process.env.DB_PASSWORD,
  database: process.env.DB_NAME
});

export default pool;

这是一个简单的示例程序，它实现了使用 Node.js、Express、JWT、Angular 和 MySQL 的登录功能。当用户输入用户名和密码时，前端会向后端发送一个 POST 请求，后端会验证用户的用户名和密码是否正确，如果正确则生成并返回一个 JWT 令牌，前端将该令牌存储在本地存储中。在后续的请求中，前端会将该令牌包含在 HTTP 请求头中，后端会验证该令牌的有效性。如果令牌有效，则允许用户访问受保护的资源。