如何仅向中间件授予 webview 应用程序的访问权限 - next.js

Question

如何授予仅移动设备可以访问 nextjs 中的中间件的访问权限？ 因为我想为 webview 应用程序处理一些 DOM，对于桌面 Web，我希望它直接进入索引页面而不通过中间件。

我正在使用 Next 版本 13。

请帮助我！

Answer 1

您可以在请求标头中查找

sec-ch-ua-mobile

以检查请求是否是从移动设备或通知发出的

查看此内容以获取更详细的说明：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA-Mobile

import { NextResponse } from 'next/server'

export function middleware(request) {
  console.log('headers: ', request.headers)
  /* Console
    headers: {
      ...
      sec-ch-ua-mobile: '?0', // this is the key with which you can determine if request is form mobile or desktop, `?1` indicates true and `?0` being false
      sec-ch-ua-platform: '"Windows"',
      ...
    }
   */
  if (request.headers['sec-ch-ua-mobile'] === '?1'){
    // do something for requests with mobile device
  }

  return NextResponse.next();
}

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico|images|design).*)'],
}