Wasp项目实战教程：为Todo应用添加用户认证功能

前言

在现代Web应用开发中，用户认证系统是必不可少的功能。本文将基于Wasp框架，详细介绍如何为Todo应用添加完整的用户认证流程。Wasp提供了开箱即用的认证解决方案，可以大大简化开发工作。

准备工作

在开始之前，请确保你已经完成了前几章的教程，拥有一个基础的Todo应用。我们将在此基础上扩展用户认证功能。

用户实体创建

Wasp会自动管理认证相关的底层实体，我们只需要声明一个User实体来关联用户和任务：

model User {
  id    Int    @id @default(autoincrement())
  tasks Task[]
}

配置认证系统

在Wasp配置文件中启用用户名密码认证：

app TodoApp {
  // ...其他配置
  auth: {
    userEntity: User,
    methods: {
      usernameAndPassword: {}
    },
    onAuthFailedRedirectTo: "/login"
  }
}

配置完成后，运行数据库迁移命令：

wasp db migrate-dev

Wasp会自动生成以下内容：

• 登录和注册表单UI组件
• 注销功能
• useAuth() React钩子
• 查询和操作中的context.user

实现登录注册页面

虽然Wasp提供了表单组件，但我们仍需创建页面容器：

1. 首先在Wasp文件中声明路由：

route SignupRoute { path: "/signup", to: SignupPage }
page SignupPage {
  component: import { SignupPage } from "@src/SignupPage"
}

route LoginRoute { path: "/login", to: LoginPage }
page LoginPage {
  component: import { LoginPage } from "@src/LoginPage"
}

2. 实现登录页面组件：

import { LoginForm } from 'wasp/client/auth'

export const LoginPage = () => {
  return (
    <div style={{ maxWidth: '400px', margin: '0 auto' }}>
      <LoginForm />
      {/* 注册链接 */}
    </div>
  )
}

3. 类似地实现注册页面。

保护主页面

将主页面设为需要认证：

page MainPage {
  authRequired: true,
  component: import { MainPage } from "@src/MainPage"
}

未认证用户访问时将重定向到登录页面。认证用户访问时，页面组件会接收到用户对象：

export const MainPage = ({ user }: { user: AuthUser }) => {
  // 使用用户信息
}

建立用户-任务关系

修改数据模型，建立用户和任务的一对多关系：

model Task {
  // ...其他字段
  user   User?   @relation(fields: [userId], references: [id])
  userId Int?
}

再次运行数据库迁移：

wasp db migrate-dev

实现用户专属操作

修改查询和操作，确保用户只能访问自己的任务：

1. 查询任务：

export const getTasks: GetTasks<void, Task[]> = async (args, context) => {
  if (!context.user) throw new HttpError(401)
  return context.entities.Task.findMany({
    where: { user: { id: context.user.id } }
  })
}

2. 创建任务：

export const createTask = async (args, context) => {
  if (!context.user) throw new HttpError(401)
  return context.entities.Task.create({
    data: {
      description: args.description,
      user: { connect: { id: context.user.id } }
    }
  })
}

3. 更新任务：

export const updateTask = async (args, context) => {
  if (!context.user) throw new HttpError(401)
  return context.entities.Task.updateMany({
    where: { id: args.id, user: { id: context.user.id } },
    data: { isDone: args.isDone }
  })
}

添加注销功能

最后，在主页添加注销按钮：

import { logout } from 'wasp/client/auth'

const MainPage = () => {
  return (
    <div>
      {/* 其他内容 */}
      <button onClick={logout}>Logout</button>
    </div>
  )
}

总结

通过本教程，我们实现了：

1. 完整的用户认证系统
2. 用户专属的任务管理
3. 安全的查询和操作限制

Wasp的认证系统还支持多种认证方式，包括Google、GitHub等社交登录，以及电子邮件认证，可以根据项目需求灵活配置。

现在你的Todo应用已经具备了多用户支持，每个用户都有自己独立的任务列表。这为应用的实际使用奠定了基础。接下来，你可以考虑添加更多功能，如任务分类、分享协作等，进一步丰富应用的功能。