Koa에서 JWT 사용자 인증을 구현하려면 어떤 단계가 필요합니까?

이번에는 Koa에서 JWT 사용자 인증을 구현하는 데 필요한 단계와 JWT 사용자 인증을 구현하기 위한 Koa의 주의 사항은 무엇인지 살펴보겠습니다.

1. 사전 지식

1. 토큰 기반 인증

2. Koajs 중국어 문서

3. K oa 프레임워크 Tutorial

2. 환경

1. Microsoft Visual Studio 2017 통합 개발 환경

2. Node.js v8.9.4Javascript런타임 환경

3. 작업을 시작하고 단계별로 개선하세요

1. 정적 리소스 서버 및 인프라

다음은 토큰 검증이 비정상인 경우 정적 서버 및 핸들러를 구현하기 위한 기본 코드입니다.

아래에서는 이 기본 코드 아래에 등록, 로그인, 정보 기능을 점차적으로 추가할 예정입니다.

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()} 服务器已经启动！`);
});

아래에는 회원가입, 로그인, 정보 댓글에 구현코드를 추가하겠습니다.

2. 라우팅 권한 제어

등록, 로그인 인터페이스, 기타 리소스는 인증이 필요하지 않으며, 정보 인터페이스는 인증이 필요합니다.

/* 路由权限控制 */
app.use(jwtKoa({ secret: secret }).unless({
 // 设置login、register接口，可以不需要认证访问
 path: [
 /^\/api\/login/,
 /^\/api\/register/,
 /^((?!\/api).)*$/ // 设置除了私有接口外的其它资源，可以不需要认证访问
 ]
}));

3. 등록

/* 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. 로그인

/* 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 })
 }
}));

프론트 엔드가 토큰을 얻은 후 로컬 저장소에 저장할 수 있습니다.

4. 정보

/* 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);
}

인증이 필요한 인터페이스에 액세스할 때는 요청 헤더에 Authorization:Bearer [token] 필드를 포함해야 합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

Vue.js를 사용하여 mpvue 프레임워크를 개발하는 단계에 대한 자세한 설명

jquery 전체 페이지 플러그인을 사용하여 헤더 및 테일 저작권 관련 추가

사용 단계에 대한 자세한 설명 Vue

의 sass 구성

위 내용은 Koa에서 JWT 사용자 인증을 구현하려면 어떤 단계가 필요합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!