本文主要是介绍在next.js的13.2.1版本中使用中间件，实现禁止特定ip访问网址所有页面，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
在实现实现禁止特定ip访问网址所有页面时，有两种方式，一种是针对单个页面，另一种是针对整个网站
在pages/api中创建文件使用，针对单个页面
之前是在pages/api下创建的中间件去实现的，但是使用pages/api中的中间件需要手动调用，也就是说如果全部页面都需要使用的话，那么就要在所有页面中去调用，页面刷新会重新加载getIp文件，也就是说会重置cachedData、cacheTime这些变量，不刷新的话就不会每次只会执行handler函数内部的代码，所以可以使用缓存，每次刷新后，就会重新请求一次，不刷新且满足条件的，就会使用缓存。
pages/api/getIp.js
// ipBlockMiddleware.js// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import axios from 'axios'
let cachedData = null;
let cacheTime = null;
/**
* 获取地区信息
* @param {*} req
* @param {*} res
*/
export default async function handler(req, res, next) {const blockedIPs = ['82.116.192.22']; // 被禁止的IP列表:塞浦路斯// 设置缓存有效期为10分钟const TEN_MINUTES = 10 * 60 * 1000;try {// 检查缓存是否有效if (cachedData && cacheTime && Date.now() - cacheTime < TEN_MINUTES) {} else {// 获取ip信息const response = await axios.get('https://api.ipdatacloud.com/v2/query?key=xxx',{ timeout: 5000 })// 更新缓存cachedData = response.data.data.locationcacheTime = Date.now();}if (blockedIPs.includes(cachedData?.ip)) {res.statusCode = 403res.end('Forbidden');} else {next && next();}} catch (error) {console.log(error);}
}
如果要在首页中使用getIp，就需要在index.js页面中的getServerSideProps使用，如果对网站所有页面都需要使用的话，那工程就有点大。所有这种方法只适用于单个页面的时候。
注意：** getServerSideProps 只能在组件中使用，像_app.js是不能使用的**
import getIp from './api/getIp'
export async function getServerSideProps({ req, res, locale }) {await getIp(req, res, () => {console.log(1111111);}); // 使用中间件return {props: {},};
}
在src目录下创建一个middleware.js文件实现全局使用中间件
首先要在src目录下创建一个middleware.js文件，在这个文件创建的，不需要手动调用，直接作用于全局。
注意：
- 这里不能使用axios发起请求，所以使用fetch
- middleware需要导出
import { NextResponse, NextRequest } from 'next/server'
// import axios from 'axios'
export const middleware = async (request, response) => {const blockedIPs = ['82.116.192.22']; // 被禁止的IP列表:塞浦路斯try {// 这里不能使用axios发起请求，所以使用fetchconst p = await fetch('https://api.ipdatacloud.com/v2/query?key=xxxxx')const d = await p.json()const ip = d.data?.location?.ipif (blockedIPs.includes(ip)) {// 符合条件则禁止页面访问，通过NextResponse.json在页面显示Forbidden字样return NextResponse.json('Forbidden', {status: 403})} else {// 正常就不做处理，直接下一步return NextResponse.next()}} catch (error) {console.log(error);}
};这篇关于在next.js的13.2.1版本中使用中间件，实现禁止特定ip访问网址所有页面的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
