spring boot + jwt+ vue 快速实现登录认证

前后台登录的执行流程：

废话不说直接上代码，后台springboot

jwt工具类（产生和验证token）

public class JwtUtils {

    private static final Long time = 1000*5L;
    private static final String signatrue = "admin";

    public static boolean checkToken(String token){
        if(token == null || token.isEmpty()){
            return false;
        }
        try {
            Jws<Claims> claimsJws = Jwts.parser().setSigningKey(signatrue).parseClaimsJws(token);
        } catch (Exception e){
            return false;
        }
        return true;
    }
    public static String createToken(){
        JwtBuilder jwtBuilder = Jwts.builder();
        String token=jwtBuilder
                //设置有效时间
                .setExpiration(new Date(System.currentTimeMillis()+time))
                //设置头
                .setHeaderParam("typ", "JWT")
                .setHeaderParam("alg", "HS256")
                //设置载荷
                .claim("username", "tom")
                .claim("role", "admin")
                .setSubject("admin-test")
                .setId(UUID.randomUUID().toString())
                .signWith(SignatureAlgorithm.HS256,signatrue)
                .compact();
        return token;
    }
}

控制器部分：

@RestController
@CrossOrigin
public class UserController {

    private final String USERNAME="admin";
    private final String PASSWORD="admin";

     @RequestMapping("/login")
     public User login(User user){
         System.err.println("后台获取登录用户："+user);
          if(user.getUsername().equals(USERNAME) && user.getPassword().equals(PASSWORD)){
              user.setToken(JwtUtils.createToken());
              return user;
          }
          return null;
     }

     @GetMapping("/checkToken")
     public boolean checkToken(String token){
         System.err.println("后台获取的token："+token);
         return JwtUtils.checkToken(token);
     }
}

前台vue项目：Login.vue

 submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    //业务判断
                    if (valid) {
                        let _this= this;
                        this.$axios.get("http://localhost:8081/login",{params:_this.loginForm}).then(response=>{
                            console.log(response.data);
                            if(response.data!=null){
                                localStorage.setItem('access-admin',JSON.stringify(response.data));
                                this.$router.replace({path:'/'});
                            }
                        })
                    } else {
                        this.$message.error('请输入完整信息');
                        return false;
                    }
                });
            }

路由：index.js

  router.beforeEach((to,from,next )=>{
      if(to.path.startsWith('/login')){
          localStorage.removeItem("access-admin");
          next();
      }else {
          let admin=JSON.parse(localStorage.getItem("access-admin"));
          if(!admin){
             next({path:'/login'});
          }else{
                  axios.get("http://localhost:8081/checkToken",{params:{token:admin.token}})
                  .then((resp)=>{
                    console.log(resp.data);
                   if(!resp.data){
                       console.log('校验失败！');
                       next({path:'/error'})
                   }
              })
              next()
          }
      }
  })

Error.vue

<script>
    export default {
        name: "Error",
        created() {
            let _this=this;
            this.$alert('登录信息失败','提示！',{
                confirmButtonText: '确定'
            }).then(resp=>{
                localStorage.removeItem("access-admin");
                _this.$router.replace({path:'/login'})
            })
        }
    }
</script>

测试：

成功：

 

 token有效期过期后：