一、运行效果展示

 

 

！注意：前端的Vue项目中要引入element-ui和axios

# npm安装element-ui、axios

npm insatll element-ui -S

npm install axios -S

# 在main中引入

// 引入ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

// 使用axios
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:'
Vue.prototype.$axios = axios

二、环境依赖准备

1、引入pom依赖

<!-- jwt -->
<dependency>
  <groupId>com.auth0</groupId>
  <artifactId>java-jwt</artifactId>
  <version>3.18.2</version>
</dependency>
<!-- redis -->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>
<!-- lombok -->
<dependency>
  <groupId>org.projectlombok</groupId>
  <artifactId>lombok</artifactId>
  <optional>true</optional>
</dependency>

2、配置yaml

server:
  port: 8080
spring:
  application:
    name: login-service # 服务名称
  redis:
    host: 127.0.0.1
    port: 6379
    password: 123456
    database: 0 #操作的是0号数据库
    jedis:
      #Redis连接池配置
      pool:
        max-active: 8 #最大连接数
        max-wait: 1ms #连接池最大阻塞等待时间
        max-idle: 4 #连接池中的最大空闲连接
        min-idle: 0 #连接池中的最小空闲连接

三、jwt生成与验证token

1、编写token工具类TokenUtils

import com.auth0.jwt.JWT;
import com.auth0.jwt.JWTCreator;
import com.auth0.jwt.algorithms.Algorithm;
import com.auth0.jwt.exceptions.TokenExpiredException;
import lombok.Data;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.StringRedisTemplate;
import org.springframework.data.redis.core.ValueOperations;
import org.springframework.stereotype.Component;
import java.util.Calendar;
import java.util.concurrent.TimeUnit;

@Component
@Data
@Slf4j
public class TokenUtils {

    @Autowired
    private StringRedisTemplate stringRedisTemplate;

    // 创建Token
    public String createToken(String userName, String hostIp) {
        //时间工具类
        Calendar instance = Calendar.getInstance();
        //设置过期时间  单位：SECOND秒  3个小时失效
        instance.add(Calendar.SECOND, 3 * 60 * 60);
        //签名（自定义）
        Algorithm algorithm = Algorithm.HMAC256("buliangshuai");
        // 创建token
        JWTCreator.Builder builder = JWT.create()
                //添加键值对数据
                .withClaim("userName", userName)
                //添加过期时间
                .withExpiresAt(instance.getTime());
        // 选择签名算法HMAC256，添加密钥字符串签名
        String token = builder.sign(algorithm);
        //输出token
        System.out.println("用户" + userName + "的token是：" + token);
        // 将token存入redis
        ValueOperations<String, String> forValue = stringRedisTemplate.opsForValue();
        // 存入主机IP和token，指定过期时间
        forValue.set(hostIp+"token", token, 3 * 60 * 60, TimeUnit.SECONDS);
        return token;
    }

    // 验证Token
    public boolean verifyToken(String token, String hostIp) {
        try {
            // 根据主机地址和redis中存储的值比对判断token是否正确
            String redisToken = stringRedisTemplate.boundValueOps(hostIp + "token").get();
            if(!token.equals(redisToken)){
                return false;
            }
        } catch (TokenExpiredException e) {
            //令牌过期抛出异常
            System.out.println("令牌过期");
            return false;
        } catch (Exception e) {
            //token非法验证失败抛出异常
            System.out.println("检验失败");
            return false;
        }
        return true;
    }
}

2、编写token接口控制类

import com.blywl.common.utils.TokenUtils;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;

@RestController
@RequestMapping("/test")
@Slf4j
@CrossOrigin // 跨域
public class TestController {
    @Autowired
    private TokenUtils tokenUtils;

    // 创建token
    @PostMapping("/token")
    public String createToken(@RequestParam("userName") String userName, HttpServletRequest request){
        return tokenUtils.createToken(userName, request.getRemoteAddr());
    }

    // 验证token
    @PostMapping("/verifyToken")
    public boolean verifyToken(@RequestParam("token") String token, HttpServletRequest request){
        return tokenUtils.verifyToken(token, request.getRemoteAddr());
    }
}

 3、前端api调用

import axios from 'axios'

let hostIp= "http://127.0.0.1:"
export default {
    // 生成用户Token
    createToken(data) {
        return axios({
            url: hostIp + '8080/test/token',
            params: data,
            method: 'post'
        })
    }

}

四、随机验证码

1、验证码工具类codeUtils

import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;

/**
 * code验证码生成工具类
 */
public class CodeUtils {
    /**
     * 生成验证码图片的宽度
     */
    private int width = 100;

    /**
     * 生成验证码图片的高度
     */
    private int height = 30;

    /**
     * 字符样式
     */
    private String[] fontNames = { "宋体", "楷体", "隶书", "微软雅黑" };

    /**
     * 定义验证码图片的背景颜色为白色
     */
    private Color bgColor = new Color(255, 255, 255);

    /**
     * 生成随机
     */
    private Random random = new Random();

    /**
     * 定义code字符
     */
    private String codes = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";

    /**
     * 记录随机字符串
     */
    private String text;

    /**
     * 获取一个随意颜色
     * @return
     */
    private Color randomColor() {
        int red = random.nextInt(150);
        int green = random.nextInt(150);
        int blue = random.nextInt(150);
        return new Color(red, green, blue);
    }

    /**
     * 获取一个随机字体
     *
     * @return
     */
    private Font randomFont() {
        String name = fontNames[random.nextInt(fontNames.length)];
        int style = random.nextInt(4);
        int size = random.nextInt(5) + 24;
        return new Font(name, style, size);
    }

    /**
     * 获取一个随机字符
     *
     * @return
     */
    private char randomChar() {
        return codes.charAt(random.nextInt(codes.length()));
    }

    /**
     * 创建一个空白的BufferedImage对象
     *
     * @return
     */
    private BufferedImage createImage() {
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        Graphics2D g2 = (Graphics2D) image.getGraphics();
        //设置验证码图片的背景颜色
        g2.setColor(bgColor);
        g2.fillRect(0, 0, width, height);
        return image;
    }

    public BufferedImage getImage() {
        BufferedImage image = createImage();
        Graphics2D g2 = (Graphics2D) image.getGraphics();
        StringBuffer sb = new StringBuffer();
        for (int i = 0; i < 4; i++) {
            String s = randomChar() + "";
            sb.append(s);
            g2.setColor(randomColor());
            g2.setFont(randomFont());
            float x = i * width * 1.0f / 4;
            g2.drawString(s, x, height - 8);
        }
        this.text = sb.toString();
        drawLine(image);
        return image;
    }

    /**
     * 绘制干扰线
     *
     * @param image
     */
    private void drawLine(BufferedImage image) {
        Graphics2D g2 = (Graphics2D) image.getGraphics();
        int num = 5;
        for (int i = 0; i < num; i++) {
            int x1 = random.nextInt(width);
            int y1 = random.nextInt(height);
            int x2 = random.nextInt(width);
            int y2 = random.nextInt(height);
            g2.setColor(randomColor());
            g2.setStroke(new BasicStroke(1.5f));
            g2.drawLine(x1, y1, x2, y2);
        }
    }

    public String getText() {
        return text;
    }

    public static void output(BufferedImage image, OutputStream out) throws IOException {
        ImageIO.write(image, "JPEG", out);
    }
}

2、编写验证码接口控制类

import com.blywl.common.utils.CodeUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.StringRedisTemplate;
import org.springframework.data.redis.core.ValueOperations;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.concurrent.TimeUnit;

@RestController
@RequestMapping("/login")
@CrossOrigin // 跨域
public class LoginController {

    @Autowired
    private StringRedisTemplate stringRedisTemplate;

    /**
     * 生成验证码图片
     */
    @GetMapping("/code")
    public void code(HttpServletRequest request, HttpServletResponse res) throws IOException {
        CodeUtils code = new CodeUtils();
        // 生成验证码图片
        BufferedImage image = code.getImage();
        // 将验证码text存入redis中
        String text = code.getText();
        ValueOperations<String, String> forValue = stringRedisTemplate.opsForValue();
        String hostIp = request.getRemoteAddr() + "code";
        // 主机,code,3分钟过期
        forValue.set(hostIp, text, 3 * 60, TimeUnit.SECONDS);
        // 响应验证码图片
        CodeUtils.output(image, res.getOutputStream());
    }

    /**
     * 登录
     */
    @PostMapping("/login")
    public String login(@RequestParam("code") String code, HttpServletRequest request) {
        // 根据主机地址和redis中存储的值比对判断验证码是否正确
        String hostIp = request.getRemoteAddr() + "code";
        String redisCode = stringRedisTemplate.boundValueOps(hostIp).get();
        System.out.println("redisValue:" + redisCode);
        if (code.equalsIgnoreCase(redisCode)) {
            return "登录成功！";
        }
        return "登录失败~";
    }

}

3、前端api调用

// 登录
async login(data) {
    return axios({
        url: hostIp + '8080/login/login',
        params: data,
        method: 'post'
    })
},

 五、完整前端代码

Login.vue

<template>
  <div class="login">
    <!-- 卡片 -->
    <el-card class="box-card">
      <h1 style="margin: 0 0 14px 100px">登录页面</h1>
      <!-- 登录 or 注册 -->
      <el-radio-group v-model="labelPosition" class="radioGroup" size="small">
        <el-radio-button label="login">登录</el-radio-button>
        <el-radio-button label="signIn">注册</el-radio-button>
      </el-radio-group>
      <!-- user输入表单 -->
      <el-form label-position="right" label-width="80px" :model="user">
        <el-form-item
            label="用户名"
            prop="name"
            :rules="[ { required: true, message: '请输入用户名', trigger: 'blur' } ]">
          <el-input v-model="user.name"></el-input>
        </el-form-item>
        <el-form-item
            label="密码"
            prop="password"
            :rules="[ { required: true, message: '请输入密码', trigger: 'blur' } ]">
          <el-input type="password" v-model="user.password" show-password></el-input>
        </el-form-item>
        <el-form-item
            v-if="labelPosition==='signIn'"
            label="确认密码"
            prop="checkPassword"
            :rules="[ { required: true, message: '请输入再次输入密码', trigger: 'blur' } ]">
          <el-input type="password" v-model="user.checkPassword" show-password></el-input>
        </el-form-item>
        <el-form-item
            label="验证码"
            prop="code"
            :rules="[ { required: true, message: '请输入验证码', trigger: 'blur' } ]">
          <el-input v-model="user.code" style="width: 120px"></el-input>
          <el-image class="codeImg" :src="imgUrl" style="cursor: pointer" @click="resetImg"></el-image>
        </el-form-item>
        <!--按钮-->
        <el-form-item class="button">
          <el-button class="button1" v-if="labelPosition==='login'" type="warning" @click="login"
                     :disabled="user.name===''||user.password===''||user.code===''" >登录
          </el-button>
          <el-button class="button1" v-if="labelPosition==='signIn'" type="warning" @click="signIn"
                     :disabled="user.name===''||user.password===''||user.checkPassword===''||user.code===''">注册
          </el-button>
          <el-button class="button1" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import logApi from "../assets/api/loginApi"

export default {
  name: "Login",
  data() {
    return {
      labelPosition: 'login',  // 开始先定位到登录
      // 用户数据
      user: {
        name: '',
        password: '',
        checkPassword: '',
        code: ''  // 验证码
      },
      imgUrl: '',
    }
  },
  // 创建周期函数
  created() {
    // 获取验证码图片
    this.imgUrl = this.$axios.defaults.baseURL + "8080/login/code"
  },
  methods: {
    // 登录
    login() {
      // 生成token并存储在浏览器内存中(可以使用localStorage.getItem('token'))查看token)
       logApi.createToken({"userName": this.user.name}).then( r =>
           localStorage.setItem("token", r.data)
      )
      // 验证码校验
      logApi.login({"code": this.user.code,}).then( r =>
          this.$message.info(r.data)
      )
    },
    // 注册
    signIn() {
      if (this.user.checkPassword !== this.user.password) {
        this.$message.error("两次输入的密码不一致!")
      }
    },
    // 点击刷新验证码图片
    resetImg(){
      this.imgUrl = this.$axios.defaults.baseURL + "8080/login/code?time="+new Date();
    },
    // 重置表单
    resetForm() {
      this.user.name = ""
      this.user.password = ""
      this.user.checkPassword = ""
    }
  }
}
</script>

<style>
.login{
    width: 100%;
    height: 100%;
    /*position: fixed;*/
    /*background-image: url(~@/assets/images/login.png);*/
    /*background-repeat: no-repeat;*/
    /*background-size: cover;*/
}
.box-card {
    width: 370px;
    margin: 5% auto auto auto;
    border: 1px solid #1f808c;
}
.radioGroup{
    width: 100%;
    margin: 0 0 10px 120px;
}
.codeImg{
    width: 120px;
    height: 35px;
    position: relative;
    top: 13px;
    left: 10px;
    border: 1px solid #b7b7b7;
}
.button{
    width: 100%;
    margin: 0 0 0 -25px;
}
.button1{
    width: 120px;
}

</style>

loginApi.js

import axios from 'axios'

let hostIp= "http://127.0.0.1:"
export default {
    // 登录
    async login(data) {
        return axios({
            url: hostIp + '8080/login/login',
            params: data,
            method: 'post'
        })
    },

    // 生成用户Token
    createToken(data) {
        return axios({
            url: hostIp + '8080/test/token',
            params: data,
            method: 'post'
        })
    }

}