商洛市商南县城乡建设局网站,网站建设与运营答案,wordpress如何分类栏,网站备案查询工信部官网在实现实现禁止特定ip访问网址所有页面时#xff0c;有两种方式#xff0c;一种是针对单个页面#xff0c;另一种是针对整个网站
在pages/api中创建文件使用#xff0c;针对单个页面,也可以应用于所有页面
之前是在pages/api下创建的中间件去实现的#xff0c;但是使用p…在实现实现禁止特定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?keyxxx,{ 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: {},};
}应用于所有页面
在_app.js文件中,使用getInitialProps方法可行这是个老版本的方法这样当页面切换就会触发getInitialProps import getIp from /pages/api/getIp
const App ({ Component, pageProps }) {
.....
}
App.getInitialProps async (context) {console.log(_app.js);await getIp(context.ctx.req, context.ctx.res)return {}
}在src目录下创建一个middleware.js文件实现全局使用中间件
middleware 首先要在src目录下创建一个middleware.js文件 在middleware中不能使用axios发送请求需要使用fetch发送请求fetch请求会返回一个方法p.json()是一个promise返回的才是数据 在middleware中是全局使用的编写代码后不用手动引用任何资源请求都会触发middleware里的代码所以会很频繁的触发如果里面有接口请求的话而pages/api中的则需要到具体的页面中的getServerSideProps去手动调用 middleware.js
import { NextResponse, NextRequest } from next/server
// import axios from axios
export const middleware async (request, response) {const blockedIPs [127.0.0.1, 192.168.0.1, 113.76.109.114, 183.9.77.26, 113.76.109.131]; // 被禁止的IP列表try {const p await fetch(https://api.ipdatacloud.com/v2/query?keyccc)const d await p.json()if (blockedIPs.includes(d.data.location.ip)) {// 符合条件则禁止页面访问通过NextResponse.json在页面显示Forbidden字样return NextResponse.json(Forbidden, {status: 403})} else {// 正常就不做处理直接下一步return NextResponse.next()}} catch (error) {console.log(error);}
};
注意
不能在middleware函数上使用async/await 否则npm run build 的时候会报错如下错误 ./node_modules/babel/runtime/regenerator/index.js Dynamic Code Evaluation (e. g. ‘eval’, ‘new Function’, ‘WebAssembly.compile’) not allowed in Edge Runtime Learn More: https://nextjs.org/docs/messages/edge-dynamic-code-evaluationmiddleware中不能使用axios发送请求需要使用fetch发送请求
上述代码打包会报错以下代码才是正确的方式不在middleware使用async/await可以通过在middleware内部生成一个函数使用async/await
import { NextResponse, NextRequest } from next/server
// import axios from axios
console.log(1111);
export const middleware (request, response) {// 这种方法不行即使符合被禁用的条件还是能访问因为没有在同步代码中手动return一个结果// const blockedIPs [CY]; // 被禁止的IP列表:塞浦路斯// try {// // 这里不能使用axios发起请求所以使用fetch// fetch(https://api.ipdatacloud.com/v2/query?keyccccc).then(res {// return res.json()// }).then(res {// console.log(kkkkkkkk);// const country_code res.data?.location?.country_code// if (!blockedIPs.includes(country_code)) {// console.log(6666666);// return NextResponse.json(Forbidden, {// status: 403// })// } else {// return NextResponse.next()// }// })// } catch (error) {// console.log(error);// }// 这种方法可以因为在最后面手动return了一个值这个值是fn异步函数的返回结果const fn async () {const blockedIPs [CY]; // 被禁止的IP列表try {const p await fetch(https://api.ipdatacloud.com/v2/query?keycccc)const d await p.json()if (blockedIPs.includes(d.data.location.country_code)) {console.log(2222);// 符合条件则禁止页面访问通过NextResponse.json在页面显示Forbidden字样return NextResponse.json(Forbidden, {status: 403})} else {// 正常就不做处理直接下一步return NextResponse.next()}} catch (error) {console.log(error);}}// 必须在同步代码中返回否则即使异步结果返回后符合禁止访问条件还是能访问return fn()
};
