jwt - 将 koa-jwt 与 koa-router 一起使用
问题描述
我正在使用koa
,koa-router
和实现 Nextjs 服务kow-jwt
,但我对它们的路由设置感到困惑。
我的项目有 2 个页面,一个是仪表板,另一个是登录。仪表板需要通过验证,登录不。如果身份验证失败,则将用户重定向到登录页面。
我在互联网上搜索,发现了一些示例如下,没有一个将它们链接在一起。
请给我一些建议,让他们一起工作。
const app = next({dev});
const handle = app.getRequestHandler();
app.prepare()
.then(() => {
const server = new koa();
const router = new koaRouter();
router.get('/login', async ctx => {
await app.render(ctx.req, ctx.res, '/login', ctx.query);
ctx.respond = false;
});
router.get('/dashboard',
jwt({
secret: config.graphqlSecret
}),
async ctx => {
await app.render(ctx.req, ctx.res, '/dashboard', ctx.query);
ctx.respond = false;
}
);
// what is the purpose of this route?
router.get('*', async ctx => {
await handle(ctx.req, ctx.res);
ctx.respond = false;
});
server.use(async (ctx, next) => {
try {
await next();
} catch (err) {
if (err.statusCode === 401) {
ctx.redirect('/login');
}
}
});
server.use(router.routes());
server.use(router.allowedMethods());
server.listen(3000);
});
使用上面的代码,行为是
- 如果我链接到带有和不带有 jwt 令牌的仪表板,它总是重定向到登录页面。
- 如果我从菜单链接到仪表板(
<Link>
在 Nextjs 中实现),它会显示仪表板的内容。
谢谢您的帮助。
解决方案
您需要在 server.use 中包含 jwt 部分,而不是在路由器中。制作两台不同的路由器,一台使用开放路由,一台使用受保护路由。然后设置开放路由,设置jwt中间件,然后设置保护路由:
const app = next({ dev })
const handle = app.getRequestHandler()
app.prepare()
.then(() => {
const server = new Koa()
const router = new Router()
router.get('/login', async ctx => {
await app.render(ctx.req, ctx.res, '/login', ctx.query);
ctx.respond = false;
});
router.get('/dashboard', async ctx => {
await app.render(ctx.req, ctx.res, '/dashboard', ctx.query);
ctx.respond = false;
});
router.get('*', async ctx => {
await handle(ctx.req, ctx.res)
ctx.respond = false
})
// this will keep redirecting user to login until is logged in
// if you remove it, will get an auth error unless you go manually
// to the login path
server.use(async (ctx, next) => {
try {
await next();
} catch (err) {
if (err.statusCode === 401) {
ctx.redirect('/login');
}
}
});
// we need to do it this way because of the way nextjs works with '*' path
// Middleware below this line is only reached if JWT token is valid
server.use(jwt({ secret: 'shared-secret' }).unless({ path: [/^\/b/] }));
// specify in unless the unprotected path
server.use(jwt({secret: config.graphqlSecret}).unless({ path: [/^\/login/] })).use(router.allowedMethods());
// every route protected by default
server.use(router.routes())
server.listen(3000);
})
推荐阅读
- salesforce - 让 LWC 根据 Picklist 显示不同的正文消息
- javascript - javascript firebase云功能:如何修复require未定义错误
- reactjs - 无法在 React 最终形式中使用 forwardRef
- vue.js - Nuxt.js 的 SSR 兼容组件库
- reactjs - Redux thunk - 错误 · 动作必须是普通对象。使用自定义中间件进行异步操作,即使调度具有键类型的对象
- xpath - 有没有办法在 Visual Studios Code 中执行 XPath 查询?
- javascript - 无法从表单数据中提取键值对
- google-cloud-platform - 云作曲家 Airlfow DAG 延迟问题
- c - c中的平均值,不超过值数据类型?
- node.js - 错误:html-webpack-plugin 无法缩小生成的输出