正文

如何用Next.js API路由实现用户认证：轻松掌握安全登录与权限控制技巧

/0 浏览量
0413

在构建现代Web应用时，用户认证和权限控制是两个至关重要的环节。Next.js作为一个流行的React框架，提供了强大的API路由功能，可以帮助开发者轻松实现用户认证和权限控制。本文将详细介绍如何使用Next.js API路由来构建安全的登录和权限控制系统。

一、准备工作

在开始之前，请确保你已经安装了Next.js。如果没有，可以通过以下命令进行安装：

npx create-next-app@latest my-app
cd my-app
npm install

二、创建API路由

首先，我们需要创建一个API路由来处理用户认证。在pages/api目录下创建一个名为auth.js的文件。

touch pages/api/auth.js

然后，在该文件中，我们将定义两个API路由：一个用于用户登录，另一个用于用户注册。

2.1 登录API路由

// pages/api/auth.js

import jwt from 'jsonwebtoken';
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { username, password } = req.body;

    const user = await prisma.user.findUnique({
      where: {
        username,
      },
    });

    if (!user || user.password !== password) {
      return res.status(401).json({ message: 'Invalid credentials' });
    }

    const token = jwt.sign({ userId: user.id }, 'your-secret-key', {
      expiresIn: '1h',
    });

    res.status(200).json({ token });
  } else {
    res.setHeader('Allow', ['POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

2.2 注册API路由

// pages/api/auth.js

import jwt from 'jsonwebtoken';
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { username, password } = req.body;

    const userExists = await prisma.user.findUnique({
      where: {
        username,
      },
    });

    if (userExists) {
      return res.status(400).json({ message: 'Username already exists' });
    }

    const newUser = await prisma.user.create({
      data: {
        username,
        password,
      },
    });

    const token = jwt.sign({ userId: newUser.id }, 'your-secret-key', {
      expiresIn: '1h',
    });

    res.status(201).json({ token });
  } else {
    res.setHeader('Allow', ['POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

三、权限控制

为了实现权限控制，我们可以在API路由中添加一些逻辑来检查用户的权限。以下是一个简单的例子：

// pages/api/auth.js

import jwt from 'jsonwebtoken';
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export default async function handler(req, res) {
  const token = req.headers.authorization?.split(' ')[1];

  if (!token) {
    return res.status(401).json({ message: 'Unauthorized' });
  }

  try {
    const decoded = jwt.verify(token, 'your-secret-key');
    const user = await prisma.user.findUnique({
      where: {
        id: decoded.userId,
      },
    });

    if (!user) {
      return res.status(401).json({ message: 'Unauthorized' });
    }

    // 检查用户权限
    if (user.role !== 'admin') {
      return res.status(403).json({ message: 'Forbidden' });
    }

    // 继续处理请求
    // ...
  } catch (error) {
    return res.status(401).json({ message: 'Invalid token' });
  }
}

四、总结

通过使用Next.js API路由，我们可以轻松地实现用户认证和权限控制。以上代码只是一个简单的示例，实际应用中可能需要更复杂的逻辑来处理认证和授权。希望这篇文章能帮助你更好地理解如何使用Next.js API路由来构建安全的Web应用。

-- 展开阅读全文 --