Wasp项目教程：为Todo应用添加用户认证系统

前言

在现代Web应用中，用户认证是不可或缺的核心功能。本文将详细介绍如何在Wasp框架中为Todo应用添加完整的用户认证系统，包括用户注册、登录、权限控制和任务关联等功能。

用户认证基础

Wasp框架内置了强大的认证系统，开发者只需简单配置即可获得完整的认证流程。认证系统包含以下核心组件：

1. 用户实体(User Entity)
2. 认证方法配置
3. 认证相关路由和页面
4. 权限控制机制

实现步骤

1. 创建用户实体

Wasp会自动处理认证相关的底层实体，我们只需在Prisma schema中定义用户模型：

model User {
  id    Int    @id @default(autoincrement())
  tasks Task[]  // 与Task建立一对多关系
}

2. 配置认证方法

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

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

配置完成后，执行数据库迁移命令更新schema：

wasp db migrate-dev

3. 创建登录和注册页面

Wasp提供了现成的认证表单组件，我们只需创建页面容器：

// 登录页面示例
import { LoginForm } from 'wasp/client/auth'

export const LoginPage = () => {
  return (
    <div>
      <LoginForm />
      <span>没有账号？<Link to="/signup">去注册</Link></span>
    </div>
  )
}

4. 实现页面权限控制

通过简单的配置即可要求用户登录才能访问特定页面：

page MainPage {
  authRequired: true,  // 开启权限控制
  component: import { MainPage } from "@src/MainPage"
}

5. 关联用户和任务

更新Task模型，建立与User的关系：

model Task {
  id          Int     @id @default(autoincrement())
  description String
  isDone      Boolean @default(false)
  user        User?   @relation(fields: [userId], references: [id])
  userId      Int?
}

6. 实现用户专属操作

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

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

7. 添加退出功能

实现简单的退出按钮：

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

const LogoutButton = () => (
  <button onClick={logout}>退出登录</button>
)

高级特性

Wasp认证系统还支持以下功能：

1. 第三方登录(Google、GitHub等)
2. 邮箱认证
3. 类型安全的链接(TypeScript)
4. 自定义认证流程

总结

通过Wasp框架，我们仅用少量代码就实现了完整的用户认证系统，包括：

• 用户注册和登录流程
• 页面级权限控制
• 用户数据隔离
• 安全的退出机制

Wasp的认证系统设计既简单又强大，开发者可以快速集成认证功能，同时保持代码的整洁和可维护性。这种全栈一体化的解决方案显著提高了开发效率，让开发者能更专注于业务逻辑的实现。