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

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

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()

}

}

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。