1 发送验证码接口联调

1.1 前端：请求验证码

  • pnpm i axios安装axios，在首页发送验证码的请求
  • 配置vite开发服务器代理
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// vite.config.ts
export default defineConfig({
	...
  server: {
    proxy: {
      "/api/v1": {
        target: "http://121.41.82.157:3000/",
      },
    },
  },
});
  • 发送验证码请求
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// src/views/SignInPage.tsx
import axios from "axios";
export const SignInPage = defineComponent({
  setup(props, context) {
    ...
    const onSendValidationCode = async () => {
      const response = await axios.post("/api/v1/validation_codes", {
        email: formData.email,
      });
      console.log(response);
    };
    return () => (
      ...
      <FormItem
        label="验证码"
        type="validationCode"
        ...
        v-model={formData.validationCode}
        onClick={onSendValidationCode}
        />
      ...
    );
  },
});

// 需要配置type="validationCode"的FormItem以及Button组件，支持onClick属性

1.2 后端：修复邮件发送bug

  • 点击发送后，实际上并未发送成功
  • validation_codes的send_email并没有调用deliver发送邮件的方法
1
2
3
4
5
6
7

# app/models/validation_code.rb
class ValidationCode < ApplicationRecord
  ...
	def send_email
		UserMailer.welcome_email(self.email).deliver
	end
end
  • 而且也没有配置生产环境的邮箱SMTP服务器，只需把开发环境的复制即可
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

config.action_mailer.raise_delivery_errors = true
config.action_mailer.perform_caching = false
config.action_mailer.delivery_method = :smtp
config.action_mailer.smtp_settings = {
  address:							'smtp.qq.com',
  port: 								587,
  domain:								'smtp.qq.com',
  user_name: 						'845217811@qq.com',
  password:							Rails.application.credentials.email_password,
  authentication:				'plain',
  anable_starttls_auto: true,
  open_timeout:					10,
  read_timeout:					10
}
  • 此外，还需要将密钥都复制到生产环境
    • EDITOR="code --wait" bin/rails credentials:edit
    • 将里面的密钥拷贝，关闭
    • EDITOR="code --wait" bin/rails credentials:edit --environment production
    • 粘贴，关闭

1.3 前端：实现60s倒计时限制（子组件的方法暴露给父组件）

  • 在FormItem(validationCode)中定义倒计时逻辑与状态，并暴露给父组件
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

// src/shared/Form.tsx

export const FormItem = defineComponent({
  props: {
    ...
    countFrom: {
      type: Number,
      default: 60,
    },
  },
  emits: ["update:modelValue"],
  setup: (props, context) => {
    ...
    // 计时器
    const timer = ref<number>();
    // 倒计时数字，默认值为父组件指定的countFrom
    const count = ref<number>(props.countFrom);
    // 判断显示内容与按钮状态的字段
    const isCounting = computed(() => !!timer.value);
    // 子组件倒计时逻辑
    const startCount = () => {
      timer.value = setInterval(() => {
        count.value -= 1;
        if (count.value === 0) {
          clearInterval(timer.value);
          timer.value = undefined;
          count.value = props.countFrom;
        }
      }, 1000);
    };
    // 将方法作为子组件实例方法，暴露给父组件，供父组件调用
    context.expose({ startCount });
    const content = computed(() => {
      switch (props.type) {
        case "validationCode":
          return (
            <>
              <input
                class={[s.formItem, s.input, s.validationCodeInput]}
                placeholder={props.placeholder}
              />
              <Button
                disabled={isCounting.value}
                onClick={props.onClick}
                class={[s.formItem, s.button, s.validationCodeButton]}
              >
                {isCounting.value ? count.value : "发送验证码"}
              </Button>
            </>
          );
      	}
    });
...

// src/shared/Button.tsx定义disabled状态
import { defineComponent, PropType } from "vue";
import s from "./Button.module.scss";
export const Button = defineComponent({
  props: {
    ...
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {
    // button的内容应该是从外部插槽定义的
    return () => (
      <button
        disabled={props.disabled}
        onClick={props.onClick}
        class={[s.button, s[props.level]]}
      >
        {context.slots.default?.()}
      </button>
  ...
  • 父组件中，在单击获取验证码后，调用子组件暴露的xxx方法，设置子组件的倒计时状态
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// src/views/SignInPage.tsx
export const SignInPage = defineComponent({
  setup(props, context) {
    const validationCodeRef = ref<any>();
    ...
    const onSendValidationCode = async () => {
      const response = await axios
        .post("/api/v1/validation_codes", {
          email: formData.email,
        })
        .then(() => {
          validationCodeRef.value.startCount();
        })
        .catch((e) => {
          errors.email = e.response.data.errors.email;
          console.log(errors);
        });
    };
    return () => (
    ...
      <FormItem
        ref={validationCodeRef}
        label="验证码"
        type="validationCode"
        v-model={formData.validationCode}
        countFrom={60}
        placeholder="请输入六位数字"
        error={errors.email?.[0]}
        onClick={onSendValidationCode}
        />
...

2 Axios封装

2.1 封装思路

  • 可以自行封装HttpClient中间层，即HttpClient类
    • 符合个人使用习惯
    • 减少对请求工具的依赖，可以随意替换
  • 将请求工具（axios、fetch等）作为其instance属性
1
2
3
4
5
6
7
8
9

export class HttpClient {
  instance: AxiosInstance;
  // 构造函数接收baseURL，传入axios
  constructor(baseURL: string) {
    this.instance = axios.create({
      baseURL,
    });
  }
}
  • 请求方法（get、post、delete等）封装为自定义方法
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

export class HttpClient {
  ...
  // 泛型表示返回值的类型, 默认为unknown
  get<R = unknown>(
    url: string,
    query?: Record<string, string>,
    // 防止属性覆盖，使用Omit将相关属性剔除
    config?: Omit<AxiosRequestConfig, "url" | "params" | "method">
  ) {
    return this.instance.request<R>({
      ...config,
      url,
      params: query,
      method: "get",
    });
  }
  post<R = unknown>(
    url: string,
    data?: Record<string, JSONValue>,
    config?: Omit<AxiosRequestConfig, "url" | "data" | "method">
  ) {
    return this.instance.request<R>({
      ...config,
      url,
      data,
      method: "post",
    });
  }
  ...
}
  • 将HttpClient实例导出即可
1
2
3
4
5
6

// 导出实例
export const http = new HttpClient("/api/v1");
// 使用
const response = await http.post("/validation_codes", {
  	email: formData.email,
})
  • **拦截器（统一的错误处理、token、loading）**可以在导出的这个实例上进行封装
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// 拦截器
http.instance.interceptors.request.use(() => {}, () => {});
http.instance.interceptors.response.use(
  (response) => {
    // 记得return 否则会阻塞在这
    return response
  }, 
  (error) => {
    throw error
    // or return Promise.reject(error)
    // 不能return error 否则会认为错误已经解决
  }
);

2.2 422的错误处理

响应拦截器接收两个函数，分别对应请求成功与失败的处理函数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

// 拦截器
http.instance.interceptors.response.use(
  (response) => {
    console.log(response);
    return response;
  },
  (error) => {
    // 由于错误除了响应错误还可能有网络、语法等类型
    if (error.response) {
      // 因此需要做一下断言（也可以不做。。）
      const axiosError = error as AxiosError;
      if (axiosError.response?.status === 429) {
        alert("你太频繁了");
      }
    }
    throw error;
  }
);

2.3 （后端）邮箱名错误处理

  • 当前端的email参数不合法时（如123），服务器会500

  • 先添加测试

1
2
3
4
5
6
7
8

it "email格式不合法会报422" do
  post '/api/v1/validation_codes', params: {
  	email: '123'
  }
  expect(response).to have_http_status(422)
  json = JSON.parse response.body
  expect(json['errors']['email'][0]).to eq('is invalid')
end
  • 增加email合法性校验
1
2
3
4

# app/models/validation_code.rb
# email需包含@字符
# \A表示开头 \z表示结尾 .表示任意字符 i表示忽略大小写
validates :email, format: {with: /\A.+@.+\z/i}

  • 修改controller状态码为422

  • 重新部署

  • 前端展示错误提示

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

const onSendValidationCode = async () => {
	const response = await http
		.post("/validation_codes", {
			email: formData.email,
		})
		.catch((e) => {
			if (e.response.status === 422)
				Object.assign(errors, e.response.data.errors);
				throw e;
		});
	validationCodeRef.value.startCount();
};

2.4 （后端）报错信息i18n

  • config/application.rb
1
2
3
4
5
6
7

module Mangosteen1
  class Application < Rails::Application
    ...
    # i18n
    config.i18n.default_locale = 'zh-CN'
  end
end
  • config/locales/zh-CN.yml
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

zh-CN:
  activerecord:
    errors:
      # rails自带错误提示信息的国际化
      message:
        invalid: 格式不正确
      # 针对不同model的错误提示国际化
      models:
        validation_code:
          attributes:
            email:
              invalid: 邮件地址格式不正确
  • 前端就不需要做提示信息的映射了

3 防止重复请求验证码

3.1 方案

思路很简单，就是在发起请求后，禁用按钮；在请求结束后，恢复禁用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

// src/views/SignInPage.tsx
const onSendValidationCode = async () => {
	refValidationCodeDisable.value = true;
  const response = await http
  	...
		.finally(() => {
			refValidationCodeDisable.value = false;
		});
	validationCodeRef.value.startCount();
};
...
// 验证码表单项要支持disabled属性
disabled={refValidationCodeDisable.value}

// src/shared/Form.tsx
export const FormItem = defineComponent({
  props: {
    ...
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  setup: (props, context) => {
    ...
        case "validationCode":
          return (
            <>
              <input
                ...
                value={props.modelValue}
                onInput={(e: any) =>
                  context.emit("update:modelValue", e.target.value)
                }
              />
              <Button
                disabled={isCounting.value || props.disabled}
                ...
              >
                {isCounting.value ? count.value : "发送验证码"}
              </Button>
            </>
          );
		...
  },
});

3.2 封装useBool hook

当页面中遇到需要类似flag功能的变量时，可以使用useBool

  • src/shared/useBool.tsx
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import { ref } from "vue";

export const useBool = (initialValue: boolean) => {
  const bool = ref(initialValue);
  return {
    ref: bool,
    toggle: () => (bool.value = !bool.value),
    on: () => (bool.value = true),
    off: () => (bool.value = false),
  };
};
  • src/views/SignInPage.tsx
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

const { 
  ref: validationCodeDisable,
  on,
  off
} = useBool(false)
const onSendValidationCode = async () => {
  on()
  const response = await http
  	...
		.finally(off);
	validationCodeRef.value.startCount();
};
...
// 验证码表单项要支持disabled属性
disabled={validationCodeDisable.value}

3.3 完善登录功能

  • 当前端校验或后端校验失败时（总之当errors中有错误存在时），不应该发送登录请求
  • 由于errors对象的结构较复杂，单纯的非空校验无法准确判断是否没有报错。因此需要提供一个判断是否有错误信息的函数
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// src/shared/validate.ts
...
export const hasErrors = (errors: Record<string, string[]>) => {
  let result = false;
  for (let key in errors) {
    if (errors[key].length > 0) {
      result = true;
      break;
    }
  }
  return result;
};
  • src/views/SignInPage.tsx
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

const onSubmit = async (e: Event) => {
  // 取消默认行为(提交后会刷新)
  e.preventDefault();
  // 为什么用assign？
  // 先重置为空，再校验
  Object.assign(errors, {
    email: [],
    code: [],
  });
  // 前端校验
  Object.assign(
    errors,
    validate(formData, [
      { key: "email", type: "required", message: "必填" },
      {
        key: "email",
        type: "pattern",
        regExp: /.+@.+/,
        message: "必须是邮箱地址",
      },
      { key: "validationCode", type: "required", message: "必填" },
    ])
  );
  // 没报错才会发送请求
  if (!hasErrors(errors)) {
    const response = await http
    .post<{ jwt: string }>("/session", formData)
    .catch((e) => {
      if (e.response.status === 422)
        Object.assign(errors, e.response.data.errors);
      throw e;
    });
    // 登录成功保存jwt
    localStorage.setItem("jwt", response.data.jwt);
  }
};

3.4 查看服务器日志

点击登录后，此时后端叒崩溃了。。。。。

登录服务器，exec进入后端container

docker exec -it mangosteen-prod-1 bash

tail -f log/production.log

1
2
3
4

[5f962cbf-63a2-43c6-9600-d92ac2fe64e7] NameError (uninitialized constant Api::V1::SessionsController::ValidationCodes):
[5f962cbf-63a2-43c6-9600-d92ac2fe64e7]
[5f962cbf-63a2-43c6-9600-d92ac2fe64e7] app/controllers/api/v1/sessions_controller.rb:12:in `create'
[5f962cbf-63a2-43c6-9600-d92ac2fe64e7] lib/auto_jwt.rb:10:in `call'

根据NameError报错信息，定位到app/controllers/api/v1/sessions_controller.rb:12:in 'create'

发现多写了个s。。。属于Typo Error

改好重新部署即可

4 双重校验

4.1 为什么双重校验

对于一个表单来说，前端是一定会做校验（非空、格式）的

为了防止黑客利用curl+post跳过前端校验，从而在数据库中插入不合法的数据

因此后端校验是必须的

4.2 后端登录接口校验

  • ActiveModel - 不在数据库中的数据模型，（无save方法）
  • ActiveRecord - 在数据库中的数据模型
  • Session在数据库中没有对应的表，属于ActiveModel，需要手写其验证器
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

# app/models/session.rb
class Session
    include ActiveModel::Model
    # Rails会默认读取ActiveRecord的表与字段
    # 由于数据库不存在Session的model，只能手动指定字段与其访问器（get set）
    attr_accessor :email, :code
    # 默认的必填与格式校验
    validates :email, :code, presence: true
    validates :email, format: {with: /\A.+@.+\z/i}
    # 自定义校验
    validate :check_validation_code
    def check_validation_code
        # 区分生产与开发环境
        return if Rails.env.test? and self.code == '123456'
        # 前面做了presence的校验，由于校验是依次执行的，所以即使code为空这里也会被执行
        return if self.code.empty?
        # 如果code不存在 则报错code 404
        self.errors.add :email, :not_found unless
            ValidationCode.exists? email: self.email, code: self.code, used_at: nil
    end
end
  • 校验单独在model中自定义，因此controller层逻辑更加清晰
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

# app/controllers/api/v1/sessions_controller.rb
require 'jwt'

class Api::V1::SessionsController < ApplicationController
    def create
        session = Session.new params.permit :email, :code
        if session.valid?
            user = User.find_or_create_by email: session.email
            render json: {jwt: user.generate_jwt}
        else
            render json: {errors: session.errors}, status: :unprocessable_entity
        end
    end
end
  • 记得报错信息国际化
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

# config/locales/zh-CN.yml
zh-CN:
  activerecord:
    errors:
      # rails自带错误提示信息的国际化
      message:
        invalid: 格式不正确
        blank: 必填
        not_found: 找不到对应的记录
      # 针对不同model的错误提示国际化
      models:
        validation_code:
          attributes:
            email:
              invalid: 邮件地址格式不正确
  activemodel:
    errors:
      messages:
        invalid: 格式不正确
        blank: 必填
        not_found: 找不到对应的记录