基于vue-admin-template+SpringBoot+JWT实现登录

<dependencies>
    <!-- JWT-->
    <dependency>
        <groupId>io.jsonwebtoken</groupId>
        <artifactId>jjwt</artifactId>
    </dependency> 
</dependencies>

第二步：添加JWT工具类

public class JwtUtils {
 
    //常量
    public static final long EXPIRE = 1000 * 60 * 60 * 24; //token过期时间
    public static final String APP_SECRET = "ukc8BDbRigUDaY6pZFfWus2jZWLPHO"; //秘钥

    //生成token字符串的方法
    public static String getJwtToken(String id, String nickname){
 
        String JwtToken = Jwts.builder()
                .setHeaderParam("typ", "JWT")
                .setHeaderParam("alg", "HS256")
 
                .setSubject("guli-user")
                .setIssuedAt(new Date())
                .setExpiration(new Date(System.currentTimeMillis() + EXPIRE))
 
                .claim("id", id)  //设置token主体部分 ，存储用户信息
                .claim("nickname", nickname)
 
                .signWith(SignatureAlgorithm.HS256, APP_SECRET)
                .compact();
 
        return JwtToken;
    }
 
    /**
     * 判断token是否存在与有效
     * @param jwtToken
     * @return
     */
    public static boolean checkToken(String jwtToken) {
        if(StringUtils.isEmpty(jwtToken)) return false;
        try {
            Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
        return true;
    }
 
    /**
     * 判断token是否存在与有效
     * @param request
     * @return
     */
    public static boolean checkToken(HttpServletRequest request) {
        try {
            String jwtToken = request.getHeader("token");
            if(StringUtils.isEmpty(jwtToken)) return false;
            Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
        return true;
    }
 
    /**
     * 根据token字符串获取会员id
     * @param request
     * @return
     */
    public static String getMemberIdByJwtToken(HttpServletRequest request) {
        String jwtToken = request.getParameter("token");
        if(StringUtils.isEmpty(jwtToken)) return "";
        Jws<Claims> claimsJws = Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
        Claims claims = claimsJws.getBody();
        return (String)claims.get("id");
    }
}

第三步：登录代码逻辑实现
service（注意这里我使用的是mybatis-plus插件操作数据库的）：

  /**
     * 登录逻辑处理
     * @param oUser
     * @return
     */
    @Override
    public R login(OUser oUser) {
        // 根据用户名，查询用户信息
        QueryWrapper<OUser> oUserQueryWrapper = new QueryWrapper<>();
        oUserQueryWrapper.eq("username",oUser.getUsername());
        OUser user = oUserMapper.selectOne(oUserQueryWrapper);

        // 1、是否有用户
        if(user == null) return R.error().data("用户不存在");

        // 2、判断用户名输入是否正确
         if(user.getUsername().equals(oUser.getUsername())){
             // 3、判断密码是否正确，正确则存放token
            if(user.getPassword().equals(oUser.getPassword())){
                Map map = new HashMap(16);
                map.put("token",JwtUtils.getJwtToken(user.getId(),user.getUsername()));
                return R.ok().data(map);
            }
            // 不正确，则提示错误信息
            else return R.error().data("密码错误");
        }

        // 不正确，则提示错误信息
        else  return R.error().data("用户名输入错误");
    }

第四步：登录控制器实现（这里的R是我统一响应实体的工具类，在第五步）

    /**
     * 使用JWT进行登录
     * @param oUser
     * @return
     */
    @PostMapping("login")
    public R login(@RequestBody OUser oUser) {
        return oUserService.login(oUser);
    }

第五步：工具类（可有，可无）

@Data
public class R<T> {

    private Boolean success;

    private Integer code;

    private String message;

    private T data;

    public void setCode(Integer code) {
        this.code = code;
    }

    //把构造方法私有
    private R() {}

    //成功静态方法
    public static R ok() {
        R r = new R();
        r.setSuccess(true);
        r.setCode(ResultCode.SUCCESS);
        r.setMessage("成功");
        return r;
    }

    //失败静态方法
    public static R error() {
        R r = new R();
        r.setSuccess(false);
        r.setCode(ResultCode.ERROR);
        r.setMessage("失败");
        return r;
    }

    public R success(Boolean success){
        this.setSuccess(success);
        return this;
    }

    public R message(String message){
        this.setMessage(message);
        return this;
    }

    public R code(Integer code){
        this.setCode(code);
        return this;
    }

    public R data(T t){
        this.setData(t);
        return this;
    }
}

第六步：获取登录信息（vue-admin-template）想要登录成功，他还会请求一个info方法，获取用户信息
1、service实现：

 /**
     * 获取用户信息逻辑处理
     * @param request 用来获取token
     * @return
     */
    @Override
    public R getInfo(HttpServletRequest request) {
        // 获取jwt解析的信息（用户的id）
        String memberIdByJwtToken = JwtUtils.getMemberIdByJwtToken(request);
        // 根据id，查询用户的信息，并将他放入data数据中
        OUser user = oUserMapper.selectById(memberIdByJwtToken);
        // 存储用户信息到响应体
        Map map = new HashMap<>();
        map.put("name",user.getUsername());
        map.put("avatar",user.getImage());
        return R.ok().data(map);
    }

2、控制器实现：

  /**
     * 解析JWT获取，用户信息
     * @return
     */
    @GetMapping("info")
    public R info(  HttpServletRequest request) {
        return oUserService.getInfo(request);
    }

源码：GitHub

更多文章