我在下一个示例中使用了Express路由,在下面的示例中/a
,授权用户可以访问下面的示例,而它/b
是公共的。
... other imports...
const app = next({ isDev })
const handle = app.getRequestHandler()
async function isAuth(req, res, next) {
const token = req.header('x-Auth-Token');
if (!token) return res.status(401).send('Access denied. No token provided.');
req.user = 'Connected!';
next();
}
app.prepare().then(() => {
const server = express()
server.get('/a', isAuth, async (req, res) => {
return app.render(req, res, '/a', req.query)
})
server.get('/b', async (req, res) => {
return app.render(req, res, '/b', req.query)
})
server.all('*', (req, res) => {
return handle(req, res)
})
server.listen(port, err => {
if (err) throw err
console.log(`> Ready on http://localhost:${port}`)
})
})
非常简单明了,目前/a
,除了使用网页中的<Link href="/a">
,我现在已正确使用浏览器的网址栏拒绝访问/b
。然后页面显示隐藏的内容,而我的访问权限尚未检查...为什么?我该如何解决这个问题?
可以使用此Github链接来复制此问题,您只需要isAuth
像在上面的示例中所做的那样添加示例即可。
这是Next.JS
Link
工作原理的一部分。它已经预取了即将到来的站点的源,而从未针对真实的端点进行取回,因此您需要针对当前情况实施前端和后端检查。有关更多信息,请随时关注Next.JS Github问题:Github NextJs受限链接中的讨论。它清楚地说明了如何处理这种情况。