发布于 2026-01-05 2 阅读
0

通往最简便的Node.js用户身份验证系统之路

通往最简便的Node.js用户身份验证系统之路

JavaScript 易于阅读和编写,但有时我们会遇到诸如用户身份验证之类的困难。

在深入探讨用户身份验证之前,让我先介绍一下我这个周末的成果:

GitHub 标志 saltyshiomix / ark

基于 NestJS、TypeORM、NEXT.js(v9.3) 和 Material UI(v4) 的最简单身份验证系统。

基于NestJSTypeORMNEXT.js (v9)Material UI (v4)的最简单身份验证系统。

软件包许可证 (MIT)

特征

技术

  • 热重载功能旨在提升开发者体验 :)
    • ts-node-dev - 编译您的 TypeScript 应用程序,并在文件修改后重新启动。
    • Next.js - React 框架
  • 数据库
  • ORM(对象关系映射)
    • TypeORM - 用于 TypeScript 和 JavaScript (ES7, ES6, ES5) 的 ORM
  • 服务器
    • NestJS——一个渐进式的Node.js框架,用于构建高效、可靠且可扩展的服务器端应用程序。
      • 内部使用Express——一个快速、无预设、极简的 Node.js Web 框架。
    • Next.js - React 框架
  • 环境变量
    • dotenv - 从 .env 加载环境变量…

是的,这是一个超级简单的用户身份验证系统 :)

另一方面,它运用了以下技术:

  • 热重载功能旨在提升开发者体验 :)
    • nodemon - 监控您的 node.js 应用程序的任何更改并自动重启服务器
    • Next.js - React 框架
  • 数据库
  • ORM(对象关系映射)
    • TypeORM - 用于 TypeScript 和 JavaScript (ES7, ES6, ES5) 的 ORM
  • 服务器
    • nest——一个渐进式的Node.js框架,用于构建高效、可靠且可扩展的服务器端应用程序。
      • 内部使用Express——一个快速、无预设、极简的 Node.js Web 框架。
    • Next.js - React 框架
  • 环境变量
    • dotenv - 从 .env 文件加载 Node.js 项目的环境变量
  • 用户身份验证
    • Passport - 简单、不引人注意的 Node.js 身份验证方案
  • UI框架
    • React——一个用于构建用户界面的 JavaScript 库
    • Next.js - React 框架
    • Material UI - 实现了谷歌 Material Design 的 React 组件。

这么多库,对吧?最简单的身份验证方式是什么?

是的。

让我们深入探讨一下:

趣味数据库

多亏了TypeORM,我们可以将数据库与实体同步

这里有一个user.entity.ts

import {
  Entity,
  Column,
  PrimaryGeneratedColumn
} from 'typeorm';

@Entity()
export class User {
  @PrimaryGeneratedColumn()
  id: number;

  @Column('varchar')
  name: string;

  @Column('varchar', {
    unique: true
  })
  email: string;

  @Column('varchar')
  password: string;  
}
Enter fullscreen mode Exit fullscreen mode

TypeORM 会自动根据装饰器信息同步数据库@Entity()
换句话说,保存后数据库会自动更新user.entity.ts

趣味编程

使用Nest,我们可以使用现代 JavaScript(TypeScript),而使用VSCode,我们可以获得代码智能等最大优势。

以下是一个示例users.controller.ts

import {
  Controller,
  Get
} from '@nestjs/common';
import { User } from './user.entity';
import { UsersService } from './users.service';

@Controller('api/users')
export class UsersController {
  constructor(private readonly service: UsersService) {}

  @Get()
  async findAll(@Query() query): Promise<User[]> {
    return await this.service.findAll();
  }
}
Enter fullscreen mode Exit fullscreen mode

通过构造函数注入,users.controller.ts它不关心findAll()用户如何操作。

就像users.service.ts这样:

import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { User } from './user.entity';

@Injectable()
export class UsersService {
  constructor(@InjectRepository(User) private readonly repository: Repository<User>) {}

  async findAll(): Promise<User[]> {
    return await this.repository.find();
  }
}
Enter fullscreen mode Exit fullscreen mode

你相信吗?

我们findAll()无需编写 SQL 脚本即可让用户使用,因为TypeORM嵌套结构隐藏了实现过程。(即所谓的“仓储模式”)

趣味SEO(服务器端渲染)

Next.js让我们能够专注于编写代码page/index.tsx而无需关心服务器端渲染:

export default () => 'Hello SSR!'; // this is a React.Component :)
Enter fullscreen mode Exit fullscreen mode

如何试玩ARK

首先,你需要安装PostgreSQL

如果你使用Mac和Homebrew,设置就非常简单:

# install database (postgresql)
$ brew install postgresql

# if you want to start postgresql in startup, try do this
$ brew services start postgresql

# create user "arkuser" with password "arkark"
$ createuser -P arkuser

# create database "arkdb" owened by "arkuser"
$ createdb arkdb -O arkuser
Enter fullscreen mode Exit fullscreen mode

就是这样!

并像使用Next.js一样使用它:

# clone repository
$ git clone https://github.com/saltyshiomix/ark.git

# install dependencies
$ cd ark
$ yarn

# development mode
# please make sure to create the `.env` file!
$ yarn dev

# production mode
# please make sure to create the `.next/.env` file!
$ yarn build
$ yarn start
Enter fullscreen mode Exit fullscreen mode

.env文件内容如下:)

# DB
DB_TYPE=postgres
DB_HOST=localhost
DB_PORT=5432
DB_USERNAME=arkuser
DB_PASSWORD=arkark
DB_DATABASE=arkdb
DB_SYNCHRONIZE=true

# App
HOST=localhost
PORT=4000
SESSION_SECRET=ark
Enter fullscreen mode Exit fullscreen mode

你会看到的http://localhost:4000

登录界面

并创建一个账户:

注册页面

您已成功登录!

登录屏幕

结论

我创建了ARK仓库,目的是展示如何轻松实现用户身份验证系统。

所以欢迎提交 PR!
(例如“实现社交登录”、“实现 JSON API”等等。)

希望对你有帮助 :)

文章来源:https://dev.to/saltyshiomix/a-road-to-the-easiest-user-authentication-system-for-nodejs-138f