在接下来的js中，auth with react查询

Question

告诉我，我想制作中间件来保护管理员页面，我可以通过该项目的会议授权。该项目本身在下一步。我想使用React查询来保护页面，但是我会发现错误：发生了错误：意外的令牌＆lt;在位置0中的JSON中，React查询

API：

import type { NextApiRequest, NextApiResponse } from 'next'
import { route } from 'next/dist/server/router'
import { useRouter } from 'next/router'
import checkSession from '../../src/services/checkCookie'

export async function middleware(req: NextApiRequest,res:NextApiResponse) {
 if (req.method === 'GET') {
  try {
    const router= useRouter()
    const sid = req.cookies['sid']
    const admin = await checkSession(sid)
    console.log(router.pathname)
    // if (router.pathname === '/admin/login' || router.pathname === '/admin/regAdmin' || admin) {
    //     return res.next()
    // }
    res.send(admin)
    const host = process.env.NODE_ENV === 'production' ? process.env.HOST : 'http://localhost:3000'
    // return  res.redirect(host + '/admin/login')
    return  res.send({ redirectUrl: '/admin/login' })
  }catch (error) {
    console.error(error)
    res.status(500).send({ message: "Server error" })
  }
 }else{
    res.status(404).send({ message: "adress error" })
 }
}

API中的服务（checkSessin）：

export default async function checkSession (token: string) {
    // const token = req.cookies['sid']
    if (typeof window === 'undefined' && token) {
        const unsign = (await import('./signature')).unsign
        const sessionToken = unsign(token, process.env.SECRET!)
        if (sessionToken && typeof sessionToken === 'string') {
            const db = (await import('../../prisma')).default
            const session = db.session.findUnique({ where: { sessionToken }, 
                include: { admin: true } })
            if (session) {
                return { admin: session.admin }
            }
        }
    }
}

页面管理员：

import { NextPage } from "next"
import AdminLayout from "../../src/component/admin/AdminLayout"
import { SalesAdminComponent } from "../../src/component/admin/SalesAdmin"
import { useQuery } from 'react-query'


const  AdminTable: NextPage = () => {

  const { isLoading, error, data,isSuccess} = useQuery('sid', () =>
   fetch('api/checkSession',{
    method:'GET',
    headers: {
      "Content-Type": "application/json"
    }
   }).then(res =>res.json())
  )
    if (isLoading) return 'Loading...'
    if (error) return 'An error has occurred: ' + error.message

    return (
      <>
       {isSuccess &&
        <AdminLayout title="OPEL Admin">
            <SalesAdminComponent />
        </AdminLayout>
       }
       {isLoading && <p>Loading..</p>}
       {error && <p>Error occurred!</p>}
      </>
    )
  }

  export default AdminTable

Answer 1

这里发生了很多事情。响应可能是无法解释为JSON的HTML页面。请在服务器和浏览器中包括日志。

另外，您为什么使用服务器上的客户端路由器？