【SPA项目的Jwt安全验证】

前言

如题，Jwt也就是当下在跨域的身份验证的最好用的解决方案。

为什么在SPA中我们需要用到Jwt的一个身份验证呢？

因为如今的SPA项目是前后端分离的，所以以前的方法已经不够使用，需要用到其他的解决方案。

---

Jwt与传统的安全验证

一，传统的身份验证

记得我们在以前不是跨域的情况下，我们只需要将登陆过的身份信息通过session保存在我们的tomcat服务器上。
这样在用户访问我们服务器上的其他资源的时候我们就可以通过用户保存在tomcat服务器上的身份信息来判断用户是否通过了登录。

从而来给用户对应的资源权限。

二，Jwt的安全验证

现如今，我们已经实现了前后端的分离，前端用的是NodeJs,后端用的是Tomcat.

这样是有好处的，后端服务器的压力不会太大，前端的界面放在了客户端这边。请求就行。

那么问题就来了，还记得我们之前刚开始将前后端连接起来的时候，也就是使用的是axios,但是服务器我们还是得做域头的处理.

没错，重点就在于域头，我们就是通过域头传一个jwt过去

大部分的概念都已经写在了里面了。

---

Jwt方案的处理

前端对Jwt的处理

因为我们在使用axios的时候也会用到传值到后台，

所以我们只需要在发送请求的时候将其编辑Jwt,
或者在接收相应的时候将其接收Jwt

那么对应的编辑和接收哪里的值呢？就是用到了我们上章学到的Vuex

我只大概的给大家看一下代码，并不难写。
state(库)

mutations(修改方法)

getters(获取方法)

重点在于，我们之前是在一个组件里面调用这些方法的 this.$store.getters.getJwt;

有个this,this代表着那个挂载的vue实列, 所以我们才能直接访问到 store

可是，所谓的http.js不是在vue实列里面的，所以我们无法通过this去获取到store

可是我们可以设置一个更大的容器，也就是window

接下来就可以通过window.vm.$store.getters.getJwt调用方法了

总结！！！

就是上面的一个拦截器，
将其客户端里的Jwt发送到服务器，
或者
将其服务器里的Jwt获取到客户端里

---

后端对Jwt的处理

一，正常登录进

也就是说如果按照正常的登录去走的话就是这样

流程:

登录失败，则不会有任何问题，jwt也不会写进域头，直接返回失败。

登录成功后，我们就会直接String jwt = JwtUtils.createJwt(claims, JwtUtils.JWT_WEB_TTL);
生成一个Jwt字符串

然后将：response.setHeader(JwtUtils.JWT_HEADER_KEY, jwt);写进域头，

也就是说只有在登录成功后才会发送一个jwt给客户端；

二，非法地址栏访问

可是如果搞好了Jwt解决方案后，就会过滤你客户端发出的请求里的Jwt是否符合要求。

当然，如果按照上面的，登录成功后，客户端发出的请求里肯定就有了Jwt字符串了，

没有的话就会进行以下处理：

多余的我也不多说了，就是从request请求里获取到相应的键值来进行判断。

并且抛出对应的错误。

---

Jwt方案测试

关闭Jwt方案测试

改变这里的boolean类型.

因为之前也说了，我们的CorsFilter 的一个相应头的处理，才会出现这些自定义的键值；

相比较于之前的请求，我们可以看到请求里面多了jwt:null这个键值

再次强调一下就是我们在http.js,里面写好的拦截器，才会出现请求里面有jwt这个键值对的存在

在没开启之前是可以通过地址栏进入的。

---

开启Jwt方案测试

就可以直接参考上面的Jwt方案的处理了，原理我就不会过多的讲解。

如果，按照登录来的话就不会有问题，

可是如果非法地址操作：

重点还是在jwt为null的情况下，才会出现错误

如果正常进入的话就会给jwt赋值，然后就可以访问后台

---

总结

Jwt是适用于跨域之间的身份验证处理

一个优秀的解决方案

Thanks♪(･ω･)ﾉ希望对大家有所帮助