在构建现代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应用。