通往最简便的Node.js用户身份验证系统之路
JavaScript 易于阅读和编写,但有时我们会遇到诸如 用户身份验证 之类的困难。
在深入探讨用户身份验证之前,让我先介绍一下我这个周末的成果:
基于 NestJS、TypeORM、NEXT.js(v9.3) 和 Material UI(v4) 的最简单身份验证系统。
是的,这是一个超级简单的用户身份验证系统 :)
另一方面,它运用了以下技术:
热重载功能旨在提升开发者体验 :)
朗
数据库
ORM(对象关系映射)
TypeORM - 用于 TypeScript 和 JavaScript (ES7, ES6, ES5) 的 ORM
服务器
环境变量
dotenv - 从 .env 文件加载 Node.js 项目的环境变量
用户身份验证
UI框架
这么多库,对吧?最简单的身份验证方式是什么?
是的。
让我们深入探讨一下:
趣味数据库
多亏了 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
首先,你需要安装 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