登陆注册业务实现|Nuxt3专题 | 前端进阶之旅

本节我们实现项目登录、注册，我们需要完成以下任务：

鉴权相关接口设计与实现；
前端页面逻辑。

# 接口设计

我们需要三个接口：

login：登录接口，接收用户名和密码，返回登录结果；
register：注册接口，接收用户名和密码，返回注册结果；
userinfo：获取用户信息接口，接收 token，返回用户信息。

下面是 Apifox 中的 login 接口设计：

# 接口实现

下面我们实现三个接口。

# 注册接口

server/api/register.post.ts

typescript
复制代码import bcrypt from 'bcryptjs'
import jwt from 'jsonwebtoken'
import type { User } from '@prisma/client'
import { createUser, getUserByUsername } from '../database/repositories/userRepository'

export default defineEventHandler(async (e) => {
  try {
    const data = await readBody<User>(e)
    const { username, password } = data
    // 校验...

    // 获取用户，存在同名用户
    const user = await getUserByUsername(username)

    if (user) {
      return sendError(e, createError({
        statusCode: 400,
        statusMessage: '用户名已存在!',
      }))
    }

    // 加密
    const salt = await bcrypt.genSalt(10)
    const hash = await bcrypt.hash(password, salt)
    data.password = hash

    // 入库
    const result = await createUser(data)

    // 生成token，写入cookie
    const secret = process.env.JSON_SECRET
    const token = jwt.sign({ username: result.username }, secret, { expiresIn: '24h' })
    setCookie(e, 'token', token, { maxAge: 24 * 3600 })

    return { ok: true, data: result }
  }
  catch (error) {
    console.error(error)
    return sendError(e, createError('注册失败!'))
  }
})