Captcha (#514)

* fix: component cannot be rendered due to switch routing

* feat(login): add captcha logic

* feat: add captcha functionality

Author: vanoneang

README.md

@@ -100,11 +100,15 @@ QQ群搜索：Lin CMS 官方交流群 或 814597236
 
 ## 版本日志
 
-最新版本 `0.4.0`
+最新版本 `0.4.1`
 
+### 0.4.1
+
+1. `A` 新增验证码功能，默认关闭验证码
 ### 0.4.0
 
 1. `U` 升级到 Vue3 版本
+
 ### 0.3.5
 
 1. `F` 统一前端规范，文件夹、文件名统一用单数和小写字母中划线形式

src/lin/model/user.js

@@ -1,5 +1,5 @@
 import store from '@/store'
-import _axios, { post, get, put } from '@/lin/plugin/axios'
+import _axios, { get, put } from '@/lin/plugin/axios'
 import { saveTokens } from '../util/token'
 
 export default class User {
@@ -24,13 +24,23 @@ export default class User {
 
   /**
    * 登陆获取tokens
-   * @param {string} username 用户名
-   * @param {string} password 密码
+   * @param { String } username 用户名
+   * @param { String } password 密码
+   * @param { String } captcha 验证码
+   * @param { String } tag 验证码签名
    */
-  static async getToken(username, password) {
-    const tokens = await post('cms/user/login', {
-      username,
-      password,
+  static async getToken(username, password, captcha, tag) {
+    const tokens = await _axios({
+      url: 'cms/user/login',
+      method: 'POST',
+      data: {
+        captcha,
+        username,
+        password,
+      },
+      headers: {
+        tag,
+      },
     })
     saveTokens(tokens.access_token, tokens.refresh_token)
     return tokens

src/view/login/login.vue

@@ -12,6 +12,10 @@
           <span class="icon secret-icon"></span>
           <input type="password" v-model="account.password" autocomplete="off" placeholder="请填写用户登录密码" />
         </div>
+        <div class="form-item password" v-if="captchaImage">
+          <img class="captcha" :src="captchaImage" />
+          <input type="password" v-model="account.captcha" autocomplete="off" placeholder="请填写验证码" />
+        </div>
         <button class="submit-btn" type="submit">登录</button>
       </form>
     </div>
@@ -22,14 +26,17 @@
 import { reactive, ref, onMounted, getCurrentInstance } from 'vue'
 import { useStore } from 'vuex'
 import { useRouter } from 'vue-router'
+import axios from 'lin/plugin/axios'
 import UserModel from '@/lin/model/user'
 import Utils from '@/lin/util/util'
 import Config from '@/config'
 
 export default {
   setup() {
+    let tag = ''
     const wait = 2000 // 2000ms之内不能重复发起请求
     const loading = ref(false)
+    const captchaImage = ref('')
     const store = useStore()
     const router = useRouter()
     const throttleLogin = ref(null)
@@ -38,16 +45,17 @@ export default {
     const account = reactive({
       username: '',
       password: '',
+      captcha: '',
     })
 
     /**
      * 根据账号密码登录，拿到 token 并储存
      */
     const login = async () => {
-      const { username, password } = account
+      const { username, password, captcha } = account
       try {
         loading.value = true
-        await UserModel.getToken(username, password)
+        await UserModel.getToken(username, password, captcha, tag)
         await getInformation()
         loading.value = false
         router.push(Config.defaultRoute)
@@ -60,6 +68,16 @@ export default {
       }
     }
 
+    const getCaptcha = async () => {
+      axios({
+        method: 'POST',
+        url: 'cms/user/captcha',
+      }).then(result => {
+        ;({ tag } = result)
+        captchaImage.value = result.image
+      })
+    }
+
     /**
      * 获取并更新当前管理员信息
      */
@@ -78,12 +96,14 @@ export default {
      * 节流登录
      */
     onMounted(() => {
+      getCaptcha()
       throttleLogin.value = Utils.throttle(login, wait)
     })
 
     return {
       account,
       loading,
+      captchaImage,
       throttleLogin,
     }
   },
@@ -130,6 +150,7 @@ export default {
       width: 100%;
 
       .form-item {
+        position: relative;
         width: 100%;
         height: 40px;
         box-sizing: border-box;
@@ -145,6 +166,13 @@ export default {
           padding-left: 74px;
           box-sizing: border-box;
         }
+
+        .captcha {
+          position: absolute;
+          width: 80px;
+          right: 30px;
+          top: -22px;
+        }
       }
 
       .form-item.nickname {