sau交流学习社区-songEagle开发系列:Vue + Vuex + Koa 中使用JWT(JSON Web Token)认证
一、前言
JWT(JSON Web Token),是为了在网络环境间传递声明而执行的一种基于JSON的开放标准(RFC 7519)。
JWT不是一个新鲜的东西,网上相关的介绍已经非常多了。不是很了解的可以在网上搜索一下相关信息。
同步到sau交流学习社区:www.mwcxs.top/page/454.ht…
二、源码
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) {// ...// 用户tokenconst userToken = {name: userName,id: results[0].id};// 签发tokenconst 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 {// 获取jwtconst token = ctx.header.authorization; if (token) {try {// 解密payload,获取用户名和IDlet 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('SONG_EAGLE_TOKEN', res.token);this.$router.push({ path: '/postlist' });} else {this.errMsg = res.message;}}}复制代码
2. Vue.js的router(路由)跳转前校验JWT是否存在,不存在则跳转到登录页面。
// /src/router/index.jsrouter.beforeEach((to, from, next) => {if (to.meta.requireAuth) {const token = localStorage.getItem('SONG_EAGLE_TOKEN');if (token && token !== 'null') {next();} else {next('/login');}} else {next();}});复制代码
3. axios拦截器中给HTTP统一添加Authorization信息
// /src/api/config.jsaxios.interceptors.request.use(config => {const token = localStorage.getItem('SONG_EAGLE_TOKEN');if (token) {// Bearer是JWT的认证头部信息config.headers.common['Authorization'] = 'Bearer ' + token;}return config;},error => {return Promise.reject(error);});复制代码
4. axios拦截器在接收到HTTP返回时统一处理返回状态
// /src/main.jsaxios.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的流程。当然单纯的JWT并不是说绝对安全的,不过对于一个个人博客系统的认证来说还是足够的。
最后打个小广告。目前正在开发新版的个人博客中,包括两部分:
【前端】(github.com/saucxs/song…)
【后端】(github.com/saucxs/song…)
都已在GitHub上开源,目前在逐步完善功能中。欢迎感兴趣的同学fork和star。
sau交流学习社区-songEagle开发系列:Vue + Vuex + Koa 中使用JWT(JSON Web Token)认证相关推荐
- sau交流学习社区--songEagle开发系列:Vue.js + Koa.js项目中使用JWT认证
一.前言 JWT(JSON Web Token),是为了在网络环境间传递声明而执行的一种基于JSON的开放标准(RFC 7519). JWT不是一个新鲜的东西,网上相关的介绍已经非常多了.不是很了解的 ...
- sau交流学习社区--基于thinkjs+vue+redis+mysql+es6开发的周报企业管理系统weekly
weekly 周报系统主要是node+vue+redis+mysql+es6,一个企业管理系统,企业员工汇报每周工作情况,以及完成情况,各级负责人可以查看和提醒相应未写周报人员. ,后端完全使用nod ...
- sau交流学习社区第三方登陆github--oauth来实现用户登录
sau交流学习社区第三方登陆github--oauth来实现用户登录 最近在丰富nodejsBlog开发的"交流学习社区"(https://www.mwcxs.top)的其他功能以 ...
- sau交流学习社区--看小说的lovebook一个无线端BS应用
一.前言 loveBook爱上阅读,是一款webapp的读小说等书籍的并且阅读的应用.如果觉得可以,欢迎fork和star. 自己最近在追斗破苍穹电视剧,下班时候在地铁上总听到有人说,斗破苍穹书籍比电 ...
- 学习Windows Mobile开发系列笔记(win32基本程序框架)
一直对Windows Mobile开发很有兴趣.去年已经做过一个这方面的项目了,虽然自己看了很多资料,但是没有系统的学习过.现在应该还只是个入门者吧. 现在想系统的学习一番,我决定把Windows M ...
- songEagle开发系列:如何让文章实时保存的问题
一.写在前面 如何实现文章的实时保存?一般写文章的写博客的网站都会有这个功能点,这样保证了用户在不小心退出的情况下数据的保存下来,这样的交互比较符合用户的使用心理学.对于用户来说这是一个非常实用的功能 ...
- oaf java_OAF_开发系列25_实现OAF中Java类型并发程式开发oracle.apps.fnd.cp.request(概念)...
一.摘要 在是使用Form/Report/SQL等并发程式时,集中在数据的操作和处理上,但是在事物处理与系统交互有很大的局限性,没有Java程序方便, 因此需要EBS系统中注册并运行Java并发程序, ...
- vuex系列--浅析Vuex 的设计思想
一.前言 在聊之前,大家要始终记得一句话:一切前端概念,都是纸老虎. 不管是Vue,还是 React,都需要管理状态(state),比如组件之间都有共享状态的需要.什么是共享状态?比如一个组件需要使用 ...
- vue项目实现登录/退出功能(包括token机制)
源码地址:https://gitee.com/cheng-xuyuan/blogWeb.git(请忽略这句) 一.登录业务的相关技术点 http是无状态的,为记录登录状态可通过cookie-sessi ...
最新文章
- mixin机制 vue_读?VuePress(四)插件机制
- DonkeyID---php扩展-64位自增ID生成器
- 本科985末端去哪学计算机好,4所“985高校”,录取分较低,常被拿来捡漏!
- 蓝桥练习-算法训练 素因子去重
- git idea 本地历史版本回滚_如何为IDEA项目创建GitHub存储库和本地Git存储库
- 前端学习(1050):todolist正在进行个数和已完成个数
- leetcode 383 赎金信 C++
- c语言注释换颜色,C语言实现注释转换
- Boltzmann 玻尔兹曼机(BM)
- python是什么 自学-自学python需要什么基础,要掌握哪些知识?
- 考研数据结构--严版图相关代码 自用
- 【图像分割】基于matalb GUI遗传神经网络图像分割【含Matlab源码 659期】
- 主机电子游戏攻略资源分享
- 豆瓣小组html模板,用前端的方式打开豆瓣租房小组
- 95后软件测试工程师成长指南
- 解决Ubuntu系统上网速度慢的问题
- 判断大学生体侧项目中立定跳远成绩的等级
- Ubuntu20.04切换阿里源镜像(清华源、网易源)
- 导入MVVMLight出现错误 ViewModelLocator does not exist in the namespace clr-namespace:WpfApp1.ViewModel
- 冯·诺依曼体系结构是什么