前言

JWT(JSON Web Token),是为了在网络环境间传递声明而执行的一种基于JSON的开放标准(RFC 7519)。

更多的介绍和说明,以及各种原理,我在此就不多赘诉了。JWT不是一个新鲜的东西,网上相关的介绍已经非常多了。不是很了解的可以在网上搜索一下相关信息。

源码

Talk is cheap. Show me the code.

工作流程

JWT本质来说是一个token。在前后端进行HTTP连接时来进行相应的验证。

  1. 博客的后台管理系统发起登录请求,后端服务器校验成功之后,生成JWT认证信息;
  2. 前端接收到JWT后进行存储;
  3. 前端在之后每次接口调用发起HTTP请求时,会将JWT放到HTTP的headers参数里的authorization中一起发送给后端;
  4. 后端接收到请求时会根据JWT中的信息来校验当前发起HTTP请求的用户是否是具有访问权限的,有访问权限时则交给服务器继续处理,没有时则直接返回401错误。

实现过程

1. 登录成功生成JWT

说明:以下代码只保留了核心代码,详细代码可在对应文件中查看,下同。

// /server/api/admin/admin.controller.js
const jwt = require('jsonwebtoken');
const config = require('../../config/config'); exports.login = async(ctx) => {
// ...
if (hashedPassword === hashPassword) {
// ...
// 用户token
const userToken = {
name: userName,
id: results[0].id
};
// 签发token
const token = jwt.sign(userToken, config.tokenSecret, { expiresIn: '2h' });
// ...
}
// ...
}

2. 添加中间件校验JWT

// /server/middlreware/tokenError.js
const jwt = require('jsonwebtoken');
const config = require('../config/config');
const util = require('util');
const verify = util.promisify(jwt.verify); /**
* 判断token是否可用
*/
module.exports = function () {
return async function (ctx, next) {
try {
// 获取jwt
const token = ctx.header.authorization;
if (token) {
try {
// 解密payload,获取用户名和ID
let payload = await verify(token.split(' ')[1], config.tokenSecret);
ctx.user = {
name: payload.name,
id: payload.id
};
} catch (err) {
console.log('token verify fail: ', err)
}
}
await next();
} catch (err) {
if (err.status === 401) {
ctx.status = 401;
ctx.body = {
success: 0,
message: '认证失败'
};
} else {
err.status = 404;
ctx.body = {
success: 0,
message: '404'
};
}
}
}
}

3. Koa.js中添加JWT处理

此处在开发时需要过滤掉登录接口(login),否则会导致JWT验证永远失败。

// /server/config/koa.js
const jwt = require('koa-jwt');
const tokenError = require('../middlreware/tokenError');
// ... const app = new Koa(); app.use(tokenError());
app.use(bodyParser());
app.use(koaJson());
app.use(resource(path.join(config.root, config.appPath))); app.use(jwt({
secret: config.tokenSecret
}).unless({
path: [/^\/backapi\/admin\/login/, /^\/blogapi\//]
})); module.exports = app;

4.前端处理

前端开发使用的是Vue.js,发送HTTP请求使用的是axios。

  1. 登录成功之后将JWT存储到localStorage中(可根据个人需要存储,我个人是比较喜欢存储到localStorage中)。

    methods: {
    login: async function () {
    // ... let res = await api.login(this.userName, this.password);
    if (res.success === 1) {
    this.errMsg = '';
    localStorage.setItem('DON_BLOG_TOKEN', res.token);
    this.$router.push({ path: '/postlist' });
    } else {
    this.errMsg = res.message;
    }
    }
    }

  2. Vue.js的router(路由)跳转前校验JWT是否存在,不存在则跳转到登录页面。

    // /src/router/index.js
    router.beforeEach((to, from, next) => {
    if (to.meta.requireAuth) {
    const token = localStorage.getItem('DON_BLOG_TOKEN');
    if (token && token !== 'null') {
    next();
    } else {
    next('/login');
    }
    } else {
    next();
    }
    });

  3. axios拦截器中给HTTP统一添加Authorization信息

    // /src/fetch/fetch.js
    axios.interceptors.request.use(
    config => {
    const token = localStorage.getItem('DON_BLOG_TOKEN');
    if (token) {
    // Bearer是JWT的认证头部信息
    config.headers.common['Authorization'] = 'Bearer ' + token;
    }
    return config;
    },
    error => {
    return Promise.reject(error);
    }
    );

  4. axios拦截器在接收到HTTP返回时统一处理返回状态

    // /src/main.js
    axios.interceptors.response.use(
    response => {
    return response;
    },
    error => {
    if (error.response.status === 401) {
    Vue.prototype.$msgBox.showMsgBox({
    title: '错误提示',
    content: '您的登录信息已失效,请重新登录',
    isShowCancelBtn: false
    }).then((val) => {
    router.push('/login');
    }).catch(() => {
    console.log('cancel');
    });
    } else {
    Vue.prototype.$message.showMessage({
    type: 'error',
    content: '系统出现错误'
    });
    }
    return Promise.reject(error);
    }
    );

总结

到这里整个流程就走完了。当然单纯的JWT并不是说绝对安全的,不过对于一个个人博客系统的认证来说还是足够的。

最后打个小广告。目前正在开发新版的个人博客中,包括前端后端两部分,都已在GitHub上开源,目前在逐步完善功能中。欢迎感兴趣的同学fork和star。

个人博客开发系列:Vue.js + Koa.js项目中使用JWT认证的更多相关文章

  1. sau交流学习社区--songEagle开发系列:Vue.js + Koa.js项目中使用JWT认证

    一.前言 JWT(JSON Web Token),是为了在网络环境间传递声明而执行的一种基于JSON的开放标准(RFC 7519). JWT不是一个新鲜的东西,网上相关的介绍已经非常多了.不是很了解的 ...

  2. Django个人博客开发 | 前言

    本渣渣不专注技术,只专注使用技术,不是一个资深的coder,是一个不折不扣的copier 1.前言 自学 Python,始于 Django 框架,Scrapy 框架,elasticsearch搜索引擎 ...

  3. django 简易博客开发 3 静态文件、from 应用与自定义

    首先还是贴一下源代码地址  https://github.com/goodspeedcheng/sblog 上一篇博客我们介绍了 django 如何在views中使用templates以及一些常用的数 ...

  4. Django博客开发-数据建模与样式设定

    开发流程介绍 之前Django的学习过程当中已经把基本Django开发学完了,现在以Django 的博客项目完成一遍课程的回顾和总结.同时来一次完整开发的Django体验. 一个产品从研究到编码我们要 ...

  5. Padrino 博客开发示例

    英文版出处:http://www.padrinorb.com/guides/blog-tutorial 楼主按 拿作者自己的话说:Padrino(谐音:派骓诺)是一款基于Sinatra的优雅的Web应 ...

  6. 【全网最全的博客美化系列教程】08.自定义地址栏Logo

    全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...

  7. 【全网最全的博客美化系列教程】01.添加Github项目链接

    全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...

  8. 【全网最全的博客美化系列教程】02.添加QQ交谈链接

    全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...

  9. Django博客开发实践,初学者开发经验

    python,Django初学者,开发简易博客,做了一下笔记,记录了开发的过程,功力浅薄,仅供初学者互相 交流,欢迎意见建议.具体链接:Django博客开发实践(一)--分析需求并创建项目 地址:ht ...

随机推荐

  1. Hadoop(八):YARN框架简介

    YARN组件图 Container是YARN框架中对应资源的抽象,封装了运行节点上的资源(内存+CPU) NodeManager负责Container状态的维护,通过心跳,把资源信息(剩余CPU.内存 ...

  2. Hadoop(七):自定义输入输出格式

    MR输入格式概述 数据输入格式 InputFormat. 用于描述MR作业的数据输入规范. 输入格式在MR框架中的作用: 文件进行分块(split),1个块就是1个Mapper任务. 从输入分块中将数 ...

  3. java web知识点复习,重新编写学生选课系统的先关操作。

    为了复习之前学习的相关的html,javaweb等知识.自己有重新编写了一遍学生选课系统. 下面主要展示登录界面的代码,以及各个大的主页面的相关jsp. <%@ page language=&q ...

  4. MTK Android MCC(移动国家码)和 MNC(移动网络码)

    国际移动用户识别码(IMSI) international mobile subscriber identity 国际上为唯一识别一个移动用户所分配的号码. 从技术上讲,IMSI可以彻底解决国际漫游问 ...

  5. Spire.Cloud 私有化部署教程(二)- Ubuntu 18.04 系统

    本教程主要介绍如何在Ubuntu 18.04系统上实现Spire.Cloud私有化部署.CentOS 7系统部署请参考 这篇教程. 详细步骤如下: 一.环境配置 1.关闭防火墙 1)首先查看防火墙状态 ...

  6. java中取得用户输入的方法

    java中取得用户输入的方法 1.采用java.util.Scanner类 采用Scannerd的next()方法读取,测试代码如下: Scanner sc=new Scanner(System.in ...

  7. Java成长记录第二集--基础重点

    第一篇写的博客给自己的学习路线立了个flag后,感觉现在学习的积极性大增,这也离不开那几位老铁们的互相鼓励.废话不多说,现在给出自己总结的Java基础部分所要重点注意的内容,对以后的开发工作也是很常用 ...

  8. 复习python的__call__ __str__ __repr__ __getattr__函数 整理

    class Www: def __init__(self,name): self.name=name def __str__(self): return '名称 %s'%self.name #__re ...

  9. Cucumber(2)——目录结构以及基本语法

    目录 回顾 HelloWorld 扩展 回顾 在上一节中,我大致的介绍了一下cucumber的特点,以及基于ruby和JavaScript下关于cucumber环境的配置,如果你还没有进行相关的了解或 ...

  10. 01、Hibernate安装配置

    1.查看你的Eclipse的版本:Help | About Eclipse       Version: 2018-12 (4.10.0) 2.HibernateTools的下载地址为:http:// ...