基于vue-cli和spring boot的用户登录功能（含验证码）

一、基础：vue、router、spring boot、mybatis、element ui、axios、jwt

二、创建一个空项目，分别创建后台模块和前端模块

后端模块

前端模块

三、编写spring boot核心配置文件

四、token生成工具类 JWTUtils.java

public class JWTUtils {

    private static final String SIGN = "oaoa";

    //获取token
    public static String getToken(Map map){

        Calendar calendar = Calendar.getInstance();
        calendar.add(Calendar.MINUTE,30);  //设置30 分钟过期
        Date time = calendar.getTime();
        JWTCreator.Builder builder = JWT.create();

        //如果有效荷载不为空，循环赋值
        if(!map.isEmpty()){
            map.forEach((k,v)->{
                builder.withClaim(k,v);
            });
        }

        String  token = builder.withExpiresAt(time).sign(Algorithm.HMAC256(SIGN));
        return token;
    }

    //token验证
    public static boolean verify(String token){
        try {
            JWTVerifier build = JWT.require(Algorithm.HMAC256(SIGN)).build();
            DecodedJWT verify = build.verify(token);
            return true;
        }catch (Exception e){
            log.info("token验证失败，错误信息为========》"+e.getMessage());
            return false;

        }

    }


}

前端工具js：request.js

//配置请求拦截器，每一个请求携带token
instance.interceptors.request.use(config=>{
  console.log(config);

  //当前端缓存有token存在时，给每个请求携带相应的token信息
  if(localStorage.getItem('token')){
    config.headers.token = localStorage.getItem('token');
  }

  config.withCredentials=false;
  console.log("请求拦截器");
  return config;
});

//响应拦截器
instance.interceptors.response.use(response=>{
  console.log('响应拦截器');
  console.log(response);
  if(response.data.code == 'ERROR'){

    MessageBox.alert(response.data.msg,{
      callback:action => {
        window.location.href = "/"
      }
    })
  }
  return response;


});

//将instance暴露出去
export default instance;

 五、成品效果

由于代码比较多，暂时未上传完整代码！！！有需要的朋友可以私聊