0x0 什么是jwt

JWT是JSON Web Token的缩写,可以用作授权认证。传统的授权认证一般采用session,由于session存储在服务端,加大了服务端的计算量,

而且多台服务器之间存在着session同步的问题。而JWT存储在客户端,不仅减少了服务端的计算量,而且天生支持分布式。

0x1 jwt的结构

JWT由三部分组成:

Header:头部,表明类型和加密算法

Claims:声明,即载荷(承载的内容)

Signature:签名,这一部分是将header和claims进行base64转码后,并用header中声明的加密算法加盐(secre)后构成。

即:

tmpstr = base64(header)+base64(claims)

signature = encrypt(tmpstr,secret)

最后三者用"."连接,即:

token = base64(header).base64(claims).signature

详细的介绍可以看jwt中文文档.

另外jwt官网有调试工具,可以辅助查错。

0x2 在web中如何使用

客户端发送登录请求(这个登录请求是不需要jwt验证的),在登录请求里返回token。

客户端把token保存起来,以后其它需要token的请求就在header里带上token。

0x3 实战

在echo框架中使用jwt

这里是官方文档教程,说的比较清楚了。

我们仅需要在登录接口里生成jwt的token,并返回,jwt中间件会自动帮我们做jwt的验证。可以把先做分组路由,在分组里使用jwt中间件。

如果不使用框架,可以直接用jwt-go

配合axios.js

我们的前端使用了vue+axios,他嫌每次都拼接header麻烦,于是帮他在网上查了一下,可以配置axios为自动添加header。

axios的代码如下:参考了这篇博客

require('es6-promise').polyfill(); // 引入一次就行
import axios from 'axios'; // 创建 axios 实例
const Axios = axios.create({
baseURL: 'your base url',
timeout: 5000, }); Axios.interceptors.request.use(
config => {
if (config.method === 'post') {
const formData = new FormData();
Object.keys(config.data).forEach(key => formData.append(key, config.data[key]));
config.data = formData;
} if (config.url !="/login" && localStorage.token != undefined ){
config.headers.Authorization = 'Bearer ' + localStorage.token;
}
return config;
},
error => {
return Promise.reject(error);
}
); Axios.interceptors.response.use(
res => {
return Promise.resolve(res);
},
error => {
return Promise.reject(error);
}
); // 将 Axios 实例添加到Vue的原型对象上
export default {
install(Vue) {
Object.defineProperty(Vue.prototype, '$Axios', { value: Axios });
}
};

注意if (config.method === 'post') 这里是把post过去的数据转为表单,如果不加这一句,提交过去的是文本了,在服务器端无法用getpost(key)这种方式获取参数了。

0x4 调试

要善于利用官网调试工具,我便在jwt加密上掉坑里了。

加密时使用的是HS256,而验证时用的是HS512。

0x5 扩展

由于jwt载荷使用的是base64编码,可以很容易被破解,所以不要放入敏感信息,也不建议放入过多的信息。

jwt里可以存过期时间,所以可以用来做时效性的应用,而且不需要使用数据库。

另外也要避免jwt的重放攻击。

golang前后端jwt对接的更多相关文章

  1. DevOps 视角的前后端分离与实战

    本文作者:CODING - 廖红坤 前言 随着微前端.微服务等技术理念和架构的蓬勃发展,我们已经没必要去讨论为什么要前后端分离这种话题,前后端分离已成为互联网项目开发的标准模式.前后端在各自的领域发展 ...

  2. JWT 在前后端分离中的应用与实践

    关于前后端分离 前后端分离是一个很有趣的议题,它不仅仅是指前后端工程师之间的相互独立的合作分工方式,更是前后端之间开发模式与交互模式的模块化.解耦化.计算机世界的经验告诉我们,对于复杂的事物,模块化总 ...

  3. 从壹开始前后端分离[.NetCore] 37 ║JWT完美实现权限与接口的动态分配

    缘起 本文已经有了对应的管理后台,地址:https://github.com/anjoy8/Blog.Admin 哈喽大家好呀!又过去一周啦,这些天小伙伴们有没有学习呀,已经有一周没有更新文章了,不过 ...

  4. 从壹开始前后端分离[.netCore 不定期 ] 36 ║解决JWT自定义中间件授权过期问题

    缘起 哈喽,老张的不定期更新的日常又开始了,在咱们的前后端分离的.net core 框架中,虽然已经实现了权限验证<框架之五 || Swagger的使用 3.3 JWT权限验证[修改]>, ...

  5. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十四║ Vuex + JWT 实现授权验证登录

    壹周回顾 哈喽,又是元气满满的一个周一,又与大家见面了,周末就是团圆节了,正好咱们的前后端也要团圆了,为什么这么说呢,因为以后的开发可能就需要前后端一起了,两边也终于会师了,还有几天Vue系列就基本告 ...

  6. 基于前后端分离的身份认证方式——JWT

    什么是JWT JWT--Json web token 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准,可实现无状态.分布式的Web应用授权. 现在一般都用redis来出来token做 ...

  7. 写在开始前---web前后端对接

    现阶段接口对接问题: 1.接口乱,不清晰明了,无文档或文档过期 2.接口和业务不匹配.不可用 3.前后端沟通,工程复杂化 4.不能深入了解业务 5.任务延期 注:前后端对业务深入了解,接口之间都是有联 ...

  8. [django]前后端分离之JWT用户认证

    在前后端分离开发时为什么需要用户认证呢?原因是由于HTTP协定是不储存状态的(stateless),这意味着当我们透过帐号密码验证一个使用者时,当下一个request请求时它就把刚刚的资料忘了.于是我 ...

  9. Spring Security + JWT实现前后端分离权限认证

    现在国内前后端很多公司都在使用前后端分离的开发方式,虽然也有很多人并不赞同前后端分离,比如以下这篇博客就很有意思: https://www.aliyun.com/jiaocheng/650661.ht ...

随机推荐

  1. 16条Android开发小经验

    1. TextView中的getTextSize返回值是以像素(px)为单位的, 而setTextSize()是以sp为单位的. 所以如果直接用返回的值来设置会出错,解决办法是 用setTextSiz ...

  2. 【svn】解析subversion的使用

    目录结构: contents structure [-] 安装客户端 安装服务端 创建仓库 启动仓库 创建客户端与仓库取得联系 使用svn服务 SVN密码管理 SVN的仓库布局和常规命令 分支.合并和 ...

  3. 一些实用的php库

    Idiorm – 轻量级ORM库 Snappy – 快照/PDF库 Buzz – 简单的HTTP请求库 Omnipay – 支付处理库 ShellWrap – 优美的命令行包装器

  4. nginx+php-fpm性能参数优化原则

    1.worker_processes 越大越好(一定数量后性能增加不明显)   2.worker_cpu_affinity 所有cpu平分worker_processes 要比每个worker_pro ...

  5. 【转载】mysql 热备份

    原文: http://www.jb51.net/article/70967.htm 热备和冷备是两个相对的概念,冷备是把数据库服务,比如MySQL,Oracle停下来,然后使用拷贝.打包或者压缩命令对 ...

  6. chrome 插件 导出与导入,以apizza SQ为例

    一.chrome 插件的导出 1.打开 chrome://extensions/ 2.打开开发者模式 3.复制插件的ID 4.搜索 通常是在:C:\Users\Lee\AppData\Local\Go ...

  7. JPA的多表复杂查询

    转 JPA的多表复杂查询:详细篇 原文链接: https://mp.weixin.qq.com/s/7J6ANppuiZJccIVN-h0T3Q 2017-11-10 从小爱喝AD钙  最近工作中由于 ...

  8. update关联其他表批量更新数据-跨数据库-跨服务器Update时关联表条件更新

    1.有时在做项目时会有些期初数据更新,从老系统更新到新系统.如果用程序循环从老系统付给新系统. 2.有时在项目中需要同步程序,或者自动同步程序时会有大量数据更新就可能用到如下方法了. 3.为了做分析, ...

  9. BUG处理流程说明

    一.        BUG处理流程图: 流程描述: 1.  测试人员发现bug提交给开发. 2.  开发人员判断是否是bug. 3.  如果是bug,进行修改,修改完成后更改bug状态为已解决. 4. ...

  10. Vue的计算属性和侦听器

    1 计算属性:他是根据对象已有的属性计算出新的属性值.具有缓存的功能,如果原始属性不变,则用缓存.否则,重新计算. 前端 <form> <label>姓</label&g ...