在这篇短文中，我将撰写有关如何使用 nextjs 构建中间件的文章。
我最近使用 nextjs 构建了一个完整的后端服务，我对 nextjs 的进步感到非常震惊。
您需要具备 javascript 和 Nodejs 的基本知识才能阅读本文。
要开始，您需要
1。使用以下命令从终端创建 nextjs 项目
npx create-next-app@latest
运行此命令后，您将收到一些配置项目的提示，请执行此操作。
创建项目后，
2。通过在终端中运行 npm install 安装必要的依赖项
我们将只安装一个用于身份验证的包库，即 jose，替代方案可能是 jsonwebtoken，但是 nextjs 中间件在浏览器上运行，因此边缘运行时不会实现一堆Node.js API
3。使用以下命令在开发模式下启动您的项目
npm run dev
4。创建 middleware.js 文件
在项目的根目录创建一个 middleware.js 文件，如果您使用的是 /src 目录，请在 /src 目录中创建该文件
5。从文件中导出中间件函数
// /middleware.js
export const middleware = async (req) => {
try {
} catch(error){
console.log(error)
}
}
6。从请求标头中提取令牌
// /middleware.js
import { NextResponse } from 'next/server'
export const middleware = async (req) => {
try {
const header = req.headers.get('authorization');
if(!header) return NextResponse.json({
status:'error'
statusCode: 400,
message:'unauthenticated'
})
const token = header.split(" ")[1];
if(!token) return NextResponse.json({
status:'error'
statusCode: 401,
message:'You are not logged in'
})
} catch(error){
console.log(error)
}
}
7。使用 jose
验证令牌
// /middleware.js
import { NextResponse } from 'next/server';
import * as jose from 'jose'
export const middleware = async (req) => {
try {
const header = req.headers.get('authorization');
if(!header) return NextResponse.json({
status:'error'
statusCode: 400,
message:'unauthenticated'
})
const token = header.split(" ")[1];
if(!token) return NextResponse.json({
status:'error'
statusCode: 401,
message:'You are not logged in'
})
const { payload } = await jose.jwtVerify(
token,
new TextEncoder().encode(process.env.NEXT_PUBLIC_JWT_KEY)
);
// your encoded data will be inside the payload object.
} catch(error){
console.log(error)
}
}
8。从已验证的令牌中提取数据并将其设置在请求标头中
// /middleware.js
import { NextResponse } from 'next/server';
import * as jose from 'jose'
export const middleware = async (req) => {
try {
const header = req.headers.get('authorization');
if(!header) return NextResponse.json({
status:'error'
statusCode: 400,
message:'unauthenticated'
})
const token = header.split(" ")[1];
if(!token) return NextResponse.json({
status:'error'
statusCode: 401,
message:'You are not logged in'
})
const { payload } = await jose.jwtVerify(
token,
new TextEncoder().encode(process.env.NEXT_PUBLIC_JWT_KEY)
);
const requestHeaders = new Headers(req.headers)
requestHeaders.set('user', payload.id)
} catch(error){
console.log(error)
}
}
9。调用 next() 函数并传递更新后的请求头
// /middleware.js
import { NextResponse } from 'next/server';
import * as jose from 'jose'
export const middleware = async (req) => {
try {
const header = req.headers.get('authorization');
if(!header) return NextResponse.json({
status:'error'
statusCode: 400,
message:'unauthenticated'
})
const token = header.split(" ")[1];
if(!token) return NextResponse.json({
status:'error'
statusCode: 401,
message:'You are not logged in'
})
const { payload } = await jose.jwtVerify(
token,
new TextEncoder().encode(process.env.NEXT_PUBLIC_JWT_KEY)
);
const requestHeaders = new Headers(req.headers)
requestHeaders.set('user', payload.id)
return NextResponse.next({
request: {
headers: requestHeaders
}
})
} catch(error){
console.log(error)
}
}
10。最后，您需要从中间件文件中导出一个配置对象，其中包含有关您要保护的路由的配置。
// /middleware.js
import { NextResponse } from 'next/server';
import * as jose from 'jose'
export const config = {
matcher:[
// contain list of routes you want to protect, e.g /api/users/:path*
]
}
export const middleware = async (req) => {
try {
const header = req.headers.get('authorization');
if(!header) return NextResponse.json({
status:'error'
statusCode: 400,
message:'unauthenticated'
})
const token = header.split(" ")[1];
if(!token) return NextResponse.json({
status:'error'
statusCode: 401,
message:'You are not logged in'
})
const { payload } = await jose.jwtVerify(
token,
new TextEncoder().encode(process.env.NEXT_PUBLIC_JWT_KEY)
);
const requestHeaders = new Headers(req.headers)
requestHeaders.set('user', payload.id)
return NextResponse.next({
request: {
headers: requestHeaders
}
})
} catch(error){
console.log(error)
}
}
我希望这 10 个步骤对您有所帮助，请在评论部分告诉我您对此方法的看法，并随时分享是否有更好的方法来实现这一目标。
谢谢。
以上是使用 Nextjs 构建中间件的详细内容。更多信息请关注PHP中文网其他相关文章！
