SpringBoot+Vue+JWT的前后端分离登录认证的步骤是怎样的

本篇文章给大家分享的是有关SpringBoot+Vue+JWT的前后端分离登录认证的步骤是怎样的，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

创建后端springboot工程

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

pom文件依赖导入。

                     org.springframework.boot            spring-boot-starter-web                            org.springframework.boot            spring-boot-starter-test            test                            org.projectlombok            lombok            1.16.16            provided                            io.jsonwebtoken            jjwt            0.9.1                            javax.xml.bind            jaxb-api            2.3.0                            com.sun.xml.bind            jaxb-impl            2.3.0                            com.sun.xml.bind            jaxb-core            2.3.0                            javax.activation            activation            1.1.1            

创建实体类：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 claimsJws = Jwts.parser().setSigningKey(signature).parseClaimsJws(token);        }catch (Exception e){            return false;        }        return true;    }}

创建控制器UserController

@RestControllerpublic 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);    }}

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

@Configurationpublic 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页面：

home页面

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

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的前后端分离登录认证的步骤是怎样的，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。