[pig框架实战] 手撕视频管理发布平台[02] - pig框架源码分析（去除开发过程中每次输入验证码的过程，方便快速登录）

需求

• 将自己搭建好的项目添加到pig项目中
• 去除开发过程中每次输入验证码的过程，方便快速登录
  • 去除验证码校验（服务器端）
  • 去除验证码校验（前端）

将自己搭建好的项目myvideos添加到pig项目中

1. File -> New ->《 Module from Existing Sources…》
   

2. 指定目录
   

3. 下一步->下一步
   
   
   
   

4. 效果
   

去除开发过程中每次输入验证码的过程，方便快速登录

去除验证码校验（服务器端）

定位校验代码步骤

• 前端请求url：http://localhost:8080/auth/oauth/token

• localhost:8080是前端node启动的服务，在vue.config.js文件中的末尾，可以得知url请求为配置转发代理的http://pig-gateway:9999

• pig-gateway为路由转发模块，通过nacos查看配置文件，可以得知**/oauth/路径由pig-auth项目处理；但是下发的过滤器标明了验证码处理是由ValidateCodeGatewayFilter.java**完成的。
  

• 查看，不校验验证码，直接返回即可。最终修改代码如下：

	@SneakyThrows
	private void checkCode(ServerHttpRequest request) {
		return;
	}

去除验证码校验（前端）

默认登录页面没有输入验证码，报错提示验证码不能为空，如下图所示：

也就是说，我们给验证码一个默认值就可以了。

那么怎么定位这个页面在哪里呢？我们通过登录页面的错误提示信息“请输入验证码”，在整个前端项目中搜索该关键字，发现下图两处vue文件有该值。

阅读两个文件，不难发现userlogin.vue是用户名密码登录的页面，而codelogin.vue则是手机号登录的方式。

直接将验证码对应的对象this.loginForm.code进行赋值即可完成任务，代码如下：

export default {
  name: "userlogin",
  data() {
    return {
      loginForm: {
        username: "admin",
        password: "123456",
        code: "",				// 这里赋值是没有用的！！！
        randomStr: ""
      },

   // 页面加载完成created函数会被调用，this.refreshCode();该方法会初始化this.loginForm.code值
   // 所以应该在refreshCode()中将this.loginForm.code设置任意不为空的字符即可！！！
  created() {
    this.refreshCode();
  },
  computed: {
    ...mapGetters(["tagWel"])
  },
  methods: {
    refreshCode() {
      // 赋值操作
      this.loginForm.code = "1";
      this.loginForm.randomStr = randomLenNum(this.code.len, true);
      this.code.type === "text"
        ? (this.code.value = randomLenNum(this.code.len))
        : (this.code.src = `${this.codeUrl}?randomStr=${this.loginForm.randomStr}`);
    },

参考资料

• 创建微服务项目骨架
• 本文章后台代码 https://gitee.com/constellations/pig
• 本文章前端代码 https://gitee.com/constellations/pig-ui
• 作者QQ：6307840