Cette fois, je vais vous montrer comment utiliser Koa dans Node.js pour implémenter l'authentification des utilisateurs JWT. Quelles sont les précautions concernant l'utilisation de Koa dans Node.js pour implémenter l'authentification des utilisateurs JWT. cas pratique. Jetons un coup d'oeil.
1. Connaissances préalables
Authentification basée sur des jetons
Documentation chinoise Koajs
Tutoriel Koa Framework
2. Environnement
Environnement de développement intégré Microsoft Visual Studio 2017
Node .js v8.9.4JavascriptEnvironnement d'exécution
3. Commencez à travailler et améliorez-vous étape par étape
1. Créez un serveur de ressources statiques et une infrastructure de base
Ce qui suit est le code de base pour implémenter un serveur statique et un gestionnaire lorsque la vérification des jetons est anormale.
Ci-dessous, nous ajouterons progressivement des fonctions d'inscription, de connexion et d'information sous ce code de base.
const path = require('path'); // 用于处理目录路径 const Koa = require('koa'); // web开发框架 const serve = require('koa-static'); // 静态资源处理 const route = require('koa-route'); // 路由中间件 const jwt = require('jsonwebtoken'); // 用于签发、解析`token` const jwtKoa = require('koa-jwt'); // 用于路由权限控制 const koaBody = require('koa-body'); // 用于查询字符串解析到`ctx.request.query` const app = new Koa(); const website = { scheme: 'http', host: 'localhost', port: 1337, join: function () { return `${this.scheme}://${this.host}:${this.port}` } } /* jwt密钥 */ const secret = 'secret'; /* 当token验证异常时候的处理,如token过期、token错误 */ app.use((ctx, next) => { return next().catch((err) => { if (err.status === 401) { ctx.status = 401; ctx.body = { ok: false, msg: err.originalError ? err.originalError.message : err.message } } else { throw err; } }); }); /* 查询字符串解析到`ctx.request.query` */ app.use(koaBody()); /* 路由权限控制 */ // 待办事项…… /* POST /api/register 注册 */ // 待办事项…… /* GET /api/login 登录 */ // 待办事项…… /* GET /api/info 信息 */ // 待办事项…… /* 静态资源处理 */ app.use(serve(path.join(dirname, 'static'))); /* 监听服务器端口 */ app.listen(website.port, () => { console.log(`${website.join()} 服务器已经启动!`); });
Ci-dessous, nous ajouterons le code d'implémentation sous les commentaires d'inscription, de connexion et d'information.
2. Contrôle des autorisations de routage
Inscription, Interface de connexion, les autres ressources ne nécessitent pas d'authentification et l'interface d'information nécessite une authentification.
/* 路由权限控制 */ app.use(jwtKoa({ secret: secret }).unless({ // 设置login、register接口,可以不需要认证访问 path: [ /^\/api\/login/, /^\/api\/register/, /^((?!\/api).)*$/ // 设置除了私有接口外的其它资源,可以不需要认证访问 ] }));
3. S'inscrire
/* POST /api/register 注册 */ app.use(route.post('/api/register', async (ctx, next) => { const body = ctx.request.body; /* * body = { * user : '御焱', * password : '123456' * } */ // 判断 body.user 和 body.password 格式是否正确 // 待办事项…… // 判断用户是否已经注册 // 待办事项…… // 保存到新用户到数据库中 // 待办事项…… // 是否注册成功 let 是否注册成功 = true; if (是否注册成功) { // 返回一个注册成功的JOSN数据给前端 return ctx.body = { ok: true, msg: '注册成功', token: getToken({ user: body.user, password: body.password }) } } else { // 返回一个注册失败的JOSN数据给前端 return ctx.body = { ok: false, msg: '注册失败' } } })); /* 获取一个期限为4小时的token */ function getToken(payload = {}) { return jwt.sign(payload, secret, { expiresIn: '4h' }); }
3. >Une fois que le front-end a obtenu le jeton, il peut être enregistré dans n'importe quel stockage local.
/* GET /api/login 登录 */ app.use(route.get('/api/login', async (ctx, next) => { const query = ctx.request.query; /* * query = { * user : '御焱', * password : '123456' * } */ // 判断 query.user 和 query.password 格式是否正确 // 待办事项…… // 判断是否已经注册 // 待办事项…… // 判断姓名、学号是否正确 // 待办事项…… return ctx.body = { ok: true, msg: '登录成功', token: getToken({ user: query.user, password: query.password }) } }));
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention. vers d'autres articles connexes sur le site Web php chinois !
/* GET /api/info 信息 */ app.use(route.get('/api/info', async (ctx, next) => { // 前端访问时会附带token在请求头 payload = getJWTPayload(ctx.headers.authorization) /* * payload = { * user : "御焱", * iat : 1524042454, * exp : 1524056854 * } */ // 根据 payload.user 查询该用户在数据库中的信息 // 待办事项…… const info = { name: '御焱', age: 10, sex: '男' } let 获取信息成功 = true; if (获取信息成功) { return ctx.body = { ok: true, msg: '获取信息成功', data: info } } else { return ctx.body = { ok: false, msg: '获取信息失败' } } })); /* 通过token获取JWT的payload部分 */ function getJWTPayload(token) { // 验证并解析JWT return jwt.verify(token.split(' ')[1], secret); }
Analyse de cas d'utilisation de React-Navigation
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!