golang前后端jwt对接

旧城等待， 2022-03-27 06:24 260阅读 0赞

## 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].  
另外jwt官网有[调试工具][Link 1]，可以辅助查错。

## 0x2 在web中如何使用 ##

客户端发送登录请求（这个登录请求是不需要jwt验证的），在登录请求里返回token。  
客户端把token保存起来，以后其它需要token的请求就在header里带上token。

## 0x3 实战 ##

### 在echo框架中使用jwt ###

这里是[官方文档][Link 2]和[教程][Link 3]，说的比较清楚了。  
我们仅需要在登录接口里生成jwt的token，并返回，jwt中间件会自动帮我们做jwt的验证。可以把先做分组路由，在分组里使用jwt中间件。  
如果不使用框架，可以直接用[jwt-go][]

### 配合axios.js ###

我们的前端使用了vue+axios，他嫌每次都拼接header麻烦，于是帮他在网上查了一下，可以配置axios为自动添加header。  
axios的代码如下：参考了这篇[博客][Link 4]

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 调试 ##

要善于利用官网[调试工具][Link 1]，我便在jwt加密上掉坑里了。  
加密时使用的是HS256，而验证时用的是HS512。

## 0x5 扩展 ##

由于jwt载荷使用的是base64编码，可以很容易被破解，所以不要放入敏感信息，也不建议放入过多的信息。  
jwt里可以存过期时间，所以可以用来做时效性的应用，而且不需要使用数据库。  
另外也要避免jwt的重放攻击。

[jwt]: https://www.jianshu.com/p/576dbf44b2ae
[Link 1]: https://jwt.io/#debugger-io
[Link 2]: https://echo.labstack.com/middleware/jwt
[Link 3]: https://echo.labstack.com/cookbook/jwt
[jwt-go]: https://github.com/dgrijalva/jwt-go
[Link 4]: http://www.jianshu.com/p/aeaa353da89b