SpringBoot+Vue+JWT的前后端分离登录认证详细步骤


Posted in Java/Android onSeptember 25, 2021

前后端分离的概念在现在很火,最近也学习了一下前后端分离的登录认证。

创建后端springboot工程

这个很简单了,按照idea的一步一步创建就行
文件目录结构:

SpringBoot+Vue+JWT的前后端分离登录认证详细步骤

pom文件依赖导入。

<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.16.16</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>io.jsonwebtoken</groupId>
            <artifactId>jjwt</artifactId>
            <version>0.9.1</version>
        </dependency>
        <dependency>
            <groupId>javax.xml.bind</groupId>
            <artifactId>jaxb-api</artifactId>
            <version>2.3.0</version>
        </dependency>
        <dependency>
            <groupId>com.sun.xml.bind</groupId>
            <artifactId>jaxb-impl</artifactId>
            <version>2.3.0</version>
        </dependency>
        <dependency>
            <groupId>com.sun.xml.bind</groupId>
            <artifactId>jaxb-core</artifactId>
            <version>2.3.0</version>
        </dependency>
        <dependency>
            <groupId>javax.activation</groupId>
            <artifactId>activation</artifactId>
            <version>1.1.1</version>
        </dependency>
    </dependencies>

创建实体类:User
//username,password,token三个字段

private String username;
    private String password;
    private String token;
    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getToken() {
        return token;
    }

    public void setToken(String token) {
        this.token = token;
    }

创建JWToken

public class JwtToken {

    private static long time = 1000*5;
    private static String signature = "admin";
	//创建token的方法
    public static String createToken(){
        JwtBuilder jwtBuilder = Jwts.builder();
        String jwtToken = jwtBuilder
                //header
                .setHeaderParam("typ","JWT")
                .setHeaderParam("alg","HS256")
                //payload
                .claim("username","tom")
                .claim("role","admin")
                .setSubject("admin-test")
                .setExpiration(new Date(System.currentTimeMillis()+time))
                .setId(UUID.randomUUID().toString())
                //signature
                .signWith(SignatureAlgorithm.HS256,signature)
                .compact();
        return jwtToken;
    }
	//校验token,布尔类型
    public static boolean checkToken(String token){
        if (token ==null){
            return false;
        }
        try {
            Jws<Claims> claimsJws = Jwts.parser().setSigningKey(signature).parseClaimsJws(token);
        }catch (Exception e){
            return false;
        }
        return true;
    }
}

创建控制器UserController

@RestController
public class UserController {

    private final String USERNAME = "admin";
    private final String PASSWORD = "123123";
	//login方法
    @GetMapping("/login")
    public User login(User user){
        if(USERNAME.equals(user.getUsername()) && PASSWORD.equals(user.getPassword())){
            //添加token
            user.setToken(JwtToken.createToken());
            return user;
        }
        return null;
    }
    //校验token
    @GetMapping("/checkToken")
    //接收前端请求过来的header中的token,然后去jwtoken校验方法里校验这个token
    public Boolean checkToken(HttpServletRequest request){
        String token = request.getHeader("token");
        return JwtToken.checkToken(token);
    }
}

不要忘了前后端分离中的跨域问题, 我们在后端进行跨域问题的解决。

@Configuration
public class CrosConfiguration implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

前端创建Vue项目

Login页面:

<script>
    export default {
        name: "Login",
        data(){
            return{
                ruleForm: {
                    username: 'admin',
                    password: '123123'
                },
                rules: {
                    username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
                    password: [{required: true, message: '请输入密码', trigger: 'blur'}]
                }
            }
        },
        methods: {
            handleSubmit(){
                this.$refs.ruleForm.validate((valid) => {
                    if(valid){
                        let _this = this
                        axios.get('http://localhost:8080/login',{params:_this.ruleForm}).then(function (response) {
                            if(response.data!=null){
                            //将token信息保存在本地客户端
                                localStorage.setItem('access-admin',JSON.stringify(response.data))
                                _this.$router.replace({path:'/'})
                            }
                        })
                    }else{
                        console.log('error submit!');
                        return false;
                    }
                })
            }
        }
    };
</script>

home页面

export default {
  data(){
    return {
      admin: ''
    }
  },
  created() {
  	//admin的信息从保存在客户端中的信息中获取
    this.admin = JSON.parse(window.localStorage.getItem('access-admin'))
  }
}
</script>

index.js路由

router.beforeEach((to, from, next) => {
  if (to.path.startsWith('/login')) {
  	//取出token信息
    window.localStorage.removeItem('access-admin')
    next()
  } else {
  	//获取token的信息。
    let admin = JSON.parse(window.localStorage.getItem('access-admin'))
    if (!admin) {
      next({path: '/login'})
    } else {
      //校验token合法性
      axios({
        url:'http://localhost:8080/checkToken',
        method:'get',
        headers:{
          token:admin.token
        }
      }).then((response) => {
        console.log(response.data)
        if(!response.data){
          console.log('校验失败')
          next({path: '/error'})
        }
      })
      next()
    }
  }
}

SpringBoot+Vue+JWT的前后端分离登录认证详细步骤

到此这篇关于SpringBoot+Vue+JWT的前后端分离登录认证的文章就介绍到这了,更多相关SpringBoot登录认证内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Java/Android 相关文章推荐
Java实战之用Swing实现通讯录管理系统
Jun 13 Java/Android
SpringBoot SpringEL表达式的使用
Jul 25 Java/Android
spring boot中nativeQuery的用法
Jul 26 Java/Android
解析mybatis-plus中的resultMap简单使用
Nov 23 Java/Android
使用jpa之动态插入与修改(重写save)
Nov 23 Java/Android
JVM的类加载器和双亲委派模式你了解吗
Mar 13 Java/Android
Java十分钟精通进阶适配器模式
Apr 06 Java/Android
Android Studio实现带三角函数对数运算功能的高级计算器
May 20 Java/Android
Ubuntu18.04下QT开发Android无法连接设备问题解决实现
Jun 01 Java/Android
Java界面编程实现界面跳转
Jun 16 Java/Android
SpringBoot项目部署到阿里云服务器的实现步骤
Jun 28 Java/Android
Java获取字符串编码格式实现思路
Sep 23 Java/Android
java如何实现socket连接方法封装
Sep 25 #Java/Android
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
Java数据开发辅助工具Docker与普通程序使用方法
Sep 15 #Java/Android
使用springMVC所需要的pom配置
Sep 15 #Java/Android
Java网络编程之UDP实现原理解析
Sep 04 #Java/Android
Java spring单点登录系统
详解Java七大阻塞队列之SynchronousQueue
You might like
解析PHP无限级分类方法及代码
2013/06/21 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
Nginx实现反向代理
2017/09/20 Servers
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
js 页面执行时间计算代码
2009/03/04 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
基于JQuery实现图片上传预览与删除操作
2016/05/24 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
使用pm2自动化部署node项目的方法步骤
2019/01/28 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
2019/06/19 jQuery
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
简单介绍Python中的struct模块
2015/04/28 Python
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
Python 模拟登陆的两种实现方法
2017/08/10 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
详解Python3中的 input() 函数
2020/03/18 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
iframe跨域的几种常用方法
2019/11/11 HTML / CSS
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
员工保密承诺书
2014/05/28 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
南京导游词
2015/02/03 职场文书
通知的写法
2015/04/23 职场文书
2015年端午节活动方案
2015/05/05 职场文书
java设计模式--原型模式详解
2021/07/21 Java/Android
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电