登录修改

.env.development

@@ -5,4 +5,5 @@
 NODE_ENV=development
 
 # api接口地址
-VITE_APP_BASE_URL=''
\ No newline at end of file
+VITE_APP_BASE_URL='http://139.196.169.103:9003'
+# VITE_APP_BASE_URL=''

.env.production

@@ -5,4 +5,4 @@
 NODE_ENV=production
 
 # api接口地址
-VITE_APP_BASE_URL=''
\ No newline at end of file
+VITE_APP_BASE_URL='http://139.196.169.103:9003'

src/api/user.ts

@@ -56,3 +56,15 @@ export const lock = () => {
     method: 'get',
   })
 }
+
+// 获取验证码
+export const getCodeImg = () => {
+  return request({
+    url: '/captchaImage',
+    headers: {
+      isToken: false,
+    },
+    method: 'get',
+    timeout: 20000,
+  })
+}

src/utils/request.ts

@@ -47,8 +47,11 @@ const requestConfig = (config: any): any => {
   // 不规范写法 可根据setting.config.js tokenName配置随意自定义headers
   // if (token) config.headers[tokenName] = token
 
+  // 是否需要设置 token
+  const isToken = (config.headers || {}).isToken === false
+
   // 规范写法 不可随意自定义
-  if (token) config.headers['Authorization'] = `Bearer ${token}`
+  if (token && !isToken) config.headers['Authorization'] = `Bearer ${token}`
 
   if (config.data && config.headers['Content-Type'] === 'application/x-www-form-urlencoded;charset=UTF-8')
     config.data = stringify(config.data)

src/views/login/Login.vue

@@ -27,14 +27,14 @@
           </el-input>
         </el-form-item>
         <!-- 验证码验证逻辑需自行开发，如不需要验证码功能建议注释 -->
-        <!-- <el-form-item prop="verificationCode">
-          <el-input v-model.trim="form.verificationCode" :placeholder="translate('验证码') + previewText" type="text">
+        <el-form-item v-if="captchaEnabled" prop="code">
+          <el-input v-model.trim="form.code" :placeholder="translate('验证码') + previewText" type="text">
             <template #prefix>
               <vab-icon icon="barcode-box-line" />
             </template>
           </el-input>
-          <img class="code" :src="codeUrl" @click="changeCode" />
-        </el-form-item> -->
+          <img class="code" :src="codeUrl" style="width: 120px; height: 40px" @click="changeCode" />
+        </el-form-item>
         <el-button v-throttle="handleLogin" class="login-btn" :loading="loading" type="primary">
           {{ translate('登录') }}
         </el-button>
@@ -65,6 +65,7 @@
 
 <script lang="ts" setup>
 import type { FormInstance, FormRules, InputInstance } from 'element-plus'
+import { getCodeImg } from '/@/api/user'
 import leftImg from '/@/assets/login_images/left_img_1.png'
 import { translate } from '/@/i18n'
 import { useSettingsStore } from '/@/store/modules/settings'
@@ -78,7 +79,8 @@ defineOptions({
 interface FormType {
   username: string
   password: string
-  verificationCode: string
+  code: string
+  uuid: string
 }
 
 const route = useRoute()
@@ -96,10 +98,14 @@ const previewText = ref<string>('')
 const formRef = ref<FormInstance>()
 const passwordRef = ref<InputInstance>()
 
+// 验证码开关
+const captchaEnabled = ref<boolean>(true)
+
 const form = reactive<FormType>({
   username: '',
   password: '',
-  verificationCode: '',
+  code: '',
+  uuid: '',
 })
 
 const validateUsername = (rule: any, value: any, callback: any) => {
@@ -143,6 +149,11 @@ const handleLogin = async () => {
           loading.value = true
           await login(form).catch(() => {
             loading.value = false
+
+            // 重新获取验证码
+            if (captchaEnabled.value) {
+              changeCode()
+            }
           })
           await router.push(handleRoute())
         } finally {
@@ -151,12 +162,23 @@ const handleLogin = async () => {
     })
 }
 const changeCode = () => {
-  codeUrl.value = `https://www.oschina.net/action/user/captcha?timestamp=${Date.now()}`
+  // codeUrl.value = `https://www.oschina.net/action/user/captcha?timestamp=${Date.now()}`
+  getCodeImg().then((res: any) => {
+    captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
+    if (captchaEnabled.value) {
+      codeUrl.value = `data:image/gif;base64,${res.img}`
+      form.uuid = res.uuid
+    }
+  })
 }
 
+onMounted(() => {
+  changeCode()
+})
+
 onBeforeMount(() => {
   form.username = 'admin'
-  form.password = '123456'
+  form.password = 'admin123'
   // 为了演示效果，会在官网演示页自动登录到首页，正式开发可删除
   if (location.hostname.includes('vuejs-core')) {
     previewText.value = '（演示地址验证码可不填）'