南阳网站建设大旗电商,小企业网站用什么主机好,如何用文档做网站,大一计算机网页制作步骤目录
1. JWT简述
1.1 什么是JWT
1.2 为什么使用JWT
1.3 JWT结构
1.4 验证过程
2. JWT示例
2.1 后台程序
2.2 前台加入jwt令牌功能 1. JWT简述
1.1 什么是JWT
Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准#xff08;(RFC 7…目录
1. JWT简述
1.1 什么是JWT
1.2 为什么使用JWT
1.3 JWT结构
1.4 验证过程
2. JWT示例
2.1 后台程序
2.2 前台加入jwt令牌功能 1. JWT简述
1.1 什么是JWT
Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准(RFC 7519).该token被设计为紧凑且安全的特别适用于分布式站点的单点登录SSO场景。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息以便于从资源服务器获取资源也可以增加一些额外的其它业务逻辑所必须的声明信息该token也可直接被用于认证也可被加密。
JSON Web TokenJWT是目前最流行的跨域身份验证解决方案
1.2 为什么使用JWT
传统的intenet服务的认证是通过session进行的当用户通过了安全认证后则在服务端的session对象中保存该用户的认证信息这样该用户对服务的访问被认为是安全的。这种模式的最大问题是没有分布式架构不方便进行横向扩展这种模式只适合于单体应用模式。如果需要进行服务集群则需要处理好共享session的问题。 如果一个庞大的系统需要按服务分解为多个独立的服务使用分布式架构则这种方式更难处理。使用jwt可以方便的处理上面提到的问题。
1.3 JWT结构 JWT头 JWT头部分是一个描述JWT元数据的JSON对象通常如下所示。{alg: HS256,typ: JWT}。
有效载荷 有效载荷部分是JWT的主体内容部分也是一个JSON对象包含需要传递的数据。这些声明被JWT标准称为claims。 例如{sub:123,name:Tom,admin:true}sub代表这个token的所有人存储的是所有人的IDname表示这个所有人的名字admin表示所有人是否管理员的角色。当后面对JWT进行验证的时候这些claim都能发挥特定的作用。 根据JWT的标准这些claims可以分为以下三种类型 A. Reserved claims(保留) 它的含义就像是编程语言的保留字一样属于JWT标准里面规定的一些claim。JWT标准里面定义好的claim有 iss (issuer)签发人 exp (expiration time)过期时间 sub (subject)主题 aud (audience)受众 nbf (Not Before)生效时间 iat (Issued At)签发时间 jti (JWT ID)编号
B. Public claims略不重要
C. Private claims(私有) 这个指的就是自定义的claim比如前面那个示例中的admin和name都属于自定的claim。这些claim跟JWT标准规定的claim区别在于JWT规定的claimJWT的接收方在拿到JWT之后都知道怎么对这些标准的claim进行验证而private claims不会验证除非明确告诉接收方要对这些claim进行验证以及规则才行。 按照JWT标准的说明保留的claims都是可选的在生成payload不强制用上面的那些claim你可以完全按照自己的想法来定义payload的结构不过这样搞根本没必要第一是如果把JWT用于认证 那么JWT标准内规定的几个claim就足够用了甚至只需要其中一两个就可以了假如想往JWT里多存一些用户业务信息比如角色和用户名等这倒是用自定义的claim来添加第二是JWT标准里面针对它自己规定的claim都提供了有详细的验证规则描述每个实现库都会参照这个描述来提供JWT的验证实现所以如果是自定义的claim名称那么你用到的实现库就不会主动去验证这些claim。
signature 签名的作用是防篡改。签名是把header和payload对应的json结构进行base64url编码之后得到的两个串用英文句点号拼接起来然后根据header里面alg指定的签名算法生成出来的。算法不同签名结果不同。以alg: HS256为例来说明前面的签名如何来得到。照前面alg可用值的说明HS256其实包含的是两种算法HMAC算法和SHA256算法前者用于生成摘要后者用于对摘要进行数字签名。这两个算法也可以用HMACSHA256来统称
JWT实际结构示例 eyJhbGciOiJIUzI1NiJ9. eyJzdWIiOiJ7fSIsImlzcyI6InpraW5nIiwiZXhwIjoxNTYyODUwMjM3LCJpYXQiOjE1NjI4NDg0MzcsImp0aSI6ImM5OWEyMzRmMDc4NzQyZWE4YjlmYThlYmYzY2VhNjBlIiwidXNlcm5hbWUiOiJ6c3MifQ. WUfqhFTeGzUZCpCfz5eeEpBXBZ8-lYg1htp-t7wD3I4
1.4 验证过程
客户端接收服务器返回的JWT将其存储在Cookie或localStorage中此后在于服务器的交互中都携带者JWT信息它验证的方法其实很简单只要把header做base64url解码就能知道JWT用的什么算法做的签名然后用这个算法再次用同样的逻辑对header和payload做一次签名并比较这个签名是否与JWT本身包含的第三个部分的串是否完全相同只要不同就可以认为这个JWT是一个被篡改过的串。
2. JWT示例
2.1 后台程序
1将资料中src目录下的代码CorsFilter.javaJwtFilter.javaJwtUtils.java拷入项目的util目录下可以根据项目设置的目录结构调整。 2程序的解释详见代码中的注释 3在web.xml中配置JwtFilter过滤器 4在用户登录验证成功后需要为该用户生成jwt令牌具体实现可参考UserAction.java 5测试后台的验证服务确定在验证通过的前提下可以正确的生成jwt令牌。
2.2 前台加入jwt令牌功能
1 在store/state.js中加入jwt变量
//存放全局参数的容器组件可以通过state.js获取全局参数
const state {LeftAsideState: open,PersonName:张飞,//存放jwt令牌jwt:null
}export default state
2在store/mutations.js中加入设置jwt方法 //设置JWT令牌setJwtToken: (state, payload) {state.jwt payload.jwt;}
3在store/getters.js中加入获取jwt的方法 //获取jwt令牌getJwtToken: function(state) {return state.jwt;}
4修改main.js应用入口
//将vue实例赋给window.vm属性以便于在http.js的响应拦截器和请求拦截器中获取vue实例
window.vm new Vue({el: #app,router,store,components: {App},template: App/
})
5完善api/http.js中的请求拦截器和响应拦截器
// 请求拦截器
axios.interceptors.request.use(function(config) {//获取store中的jwt令牌如果正常获取将其放入请求头//在调用后台服务时服务会通过过滤器验证jwt令牌的有效性//如果没有令牌或令牌无效则拒绝服务。let jwt window.vm.$store.getters.getJwtToken;if(jwt) {config.headers[jwt] jwt;}return config;
}, function(error) {return Promise.reject(error);
});// 响应拦截器
axios.interceptors.response.use(function(response) {//获取响应头中的jwt令牌数据认证服务将生成的令牌放入header的jwt属性中//如果获取到jwt令牌在保存到store中以后发送请求时需要将令牌放入请求头let jwt response.headers[jwt];if(jwt) {window.vm.$store.commit(setJwtToken,{jwt:jwt});}return response;
}, function(error) {return Promise.reject(error);
});
完毕测试
