当前位置:   article > 正文

java不同项目加token访问_利用JWT实现前后端分离的Token验证

token在不同前端项目中传递

写在前面:本篇文章的代码图片展示均使用carbon绘制,图片质量很高,如果图片过小可以点击查看原图。项目实例前端部分使用基于Angular的Ionic框架(TypeScript),使用Spring Boot(Java)来搭建服务端。数据库使用MySQL。

什么是Token?

Token是服务端生成的一串字符串,以作客户端进行请求的一个令牌,当第一次登录后,服务器会生成一个Token并将此Token,返回给客户端,以后客户端只需带上这个Token前来请求数据即可,无需再次带上用户名和密码。

为什么要使用Token?

在很多项目案例中,需要实现账户的功能,客户端所有的功能都基于用户已登陆的前提下才可以使用。这就要求每次客户端像服务器请求数据时都要验证账户是否正确,如果正确则按正常方式返回数据,如果错误则进行拦截并返回错误信息。但是当客户端频繁向服务器请求数据的话,每次服务器都要频繁地查询数据库。而Token正是为了减轻服务器的压力,减少频繁的查询数据库,使服务器更加健壮。并取代传统使用session的方法来进行验证。

如何使用Token?

1.数据库建表:

21ded0dfe8b4fea0fd608e3a144e0493.png

2.后端部分:

( 1 )引入依赖:

20c24bc32ecc172f3da1c133cbb8b43b.png

( 2 )创建一个Token类作为实体类,实现getter和setter方法:

464f861ca16eed5446b1accde25027e1.png

( 3 )创建对应的Mapper接口,这里我使用了MyBatis的注解方式,相比于传统的DAO类写法,MyBatis更加优雅和简便:

989d4813d3faf5bd378a378f31f186b0.png

( 4 )编写controller类,这里的User类是账户的实体类,该类的实现过程在本文不算重要,可以自己去实现。首先编写login函数,从前端接收传来的用户信息,如果信息正确会为前端提供对应的token。

2d951cb4d23764545b3c20a3656433fa.png

createToken函数用于创建对应的Token:

1b426853408b0324821be42aac62980f.png

( 5 )创建Token拦截器,实现HandlerInterceptor接口类:这里为了演示方便没有做异常处理,如果被拦截只会简单地在控制台输出错误原因,可以根据自己需求自行做修改。

905a01840b2052f09e1ec82bc5dcbdc9.png

( 6 )配置拦截器

按照网上大部分的方法,都是使configuration类继承WebMvcConfigurationSupport,但这种配置方法已经在SpringBoot 4.0版本前就被弃用了,使用这种方法还会使静态资源无法被使用,正确的做法是实现WebMvcConfigurer接口类。如图当客户端访问‘/myApp/’下的URL时就会进行Token验证,如果不通过则客户端无法接收到来自服务器的数据。

da3951ba7dcea813873c0353a27797b3.png

3.前端部分:

( 1 )创建一个和数据库对应的Token实体类:

ca7e9f33c6fb543b7c66cd3af4d3983b.png

( 2 ) 创建一个http服务,并引入angular自己的http服务。每次请求数据时会从storage中取出token并添加到请求头中。因为原理都一样,就是在不同的请求方式中添加一个包含Token的自定义请求头,所以这里只展示get方法的写法,其他POST等请求方法的写法与其类似。

9d420502b7c783247543031543d89e2a.png

参考资料:

token是什么 - Bonjourjw的博客 - CSDN博客​blog.csdn.net angular 使用jwt token验证​blog.csdn.net Springboot学习07 :验证用户登录token方式​blog.csdn.net
9f8c7f279d5df14426aa9e8a4cbe3907.png
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/638510
推荐阅读
相关标签
  

闽ICP备14008679号