feat(auth): 接入 MEDISIGN 登录接口
- 新增认证 API、类型与本地会话存储 - 登录页改为真实账号密码登录并移除验证码 - 请求拦截器改用 X-Token 并处理 401 跳转 - 添加 Vite /api 开发代理配置
This commit is contained in:
@@ -2,37 +2,49 @@
|
||||
import { ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
import { getAuthErrorMessage, login as loginRequest } from '@/api/auth'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const appStore = useAppStore()
|
||||
|
||||
const username = ref('zhangwj')
|
||||
const password = ref('******')
|
||||
const captcha = ref('8362')
|
||||
const username = ref('')
|
||||
const password = ref('')
|
||||
const errorMessage = ref('')
|
||||
const captchaCode = '8362'
|
||||
const isSubmitting = ref(false)
|
||||
|
||||
function getRedirectPath() {
|
||||
const redirect = route.query.redirect
|
||||
return typeof redirect === 'string' && redirect.startsWith('/') ? redirect : '/workbench/home'
|
||||
return typeof redirect === 'string' && redirect.startsWith('/') && !redirect.startsWith('//')
|
||||
? redirect
|
||||
: '/workbench/home'
|
||||
}
|
||||
|
||||
function handleLogin() {
|
||||
if (!username.value.trim() || !password.value.trim() || !captcha.value.trim()) {
|
||||
errorMessage.value = '请输入完整的账号、密码和验证码'
|
||||
return
|
||||
}
|
||||
async function handleLogin() {
|
||||
const normalizedUsername = username.value.trim()
|
||||
|
||||
if (captcha.value.trim() !== captchaCode) {
|
||||
errorMessage.value = '验证码错误,请重新输入'
|
||||
if (!normalizedUsername || !password.value) {
|
||||
errorMessage.value = '请输入账号和密码'
|
||||
return
|
||||
}
|
||||
|
||||
errorMessage.value = ''
|
||||
appStore.login(username.value.trim())
|
||||
void router.replace(getRedirectPath())
|
||||
isSubmitting.value = true
|
||||
|
||||
try {
|
||||
const session = await loginRequest({
|
||||
username: normalizedUsername,
|
||||
password: password.value,
|
||||
})
|
||||
|
||||
appStore.login(session)
|
||||
await router.replace(getRedirectPath())
|
||||
} catch (error: unknown) {
|
||||
errorMessage.value = getAuthErrorMessage(error)
|
||||
} finally {
|
||||
isSubmitting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -87,25 +99,12 @@ function handleLogin() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="login-field">
|
||||
<label for="login-captcha">验证码</label>
|
||||
<div class="login-captcha-row">
|
||||
<input
|
||||
id="login-captcha"
|
||||
v-model="captcha"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
autocomplete="one-time-code"
|
||||
placeholder="验证码"
|
||||
/>
|
||||
<span class="login-captcha-image" aria-label="验证码">{{ captchaCode }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-if="errorMessage" class="login-error" role="alert">{{ errorMessage }}</p>
|
||||
|
||||
<button class="login-submit" type="submit">登 录</button>
|
||||
<p class="login-tip">原型演示:任意账号密码均可登录</p>
|
||||
<button class="login-submit" type="submit" :disabled="isSubmitting">
|
||||
{{ isSubmitting ? '登录中…' : '登 录' }}
|
||||
</button>
|
||||
<p class="login-tip">请使用医院分配的账号登录</p>
|
||||
</form>
|
||||
|
||||
<p class="login-footer">© 2026 医签通 MEDISIGN · 患者电子签署系统 V1.1 原型</p>
|
||||
@@ -194,29 +193,6 @@ function handleLogin() {
|
||||
border-color: var(--brand);
|
||||
}
|
||||
|
||||
.login-captcha-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.login-captcha-row input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.login-captcha-image {
|
||||
flex-shrink: 0;
|
||||
padding: 8px 14px;
|
||||
color: #5c7d8a;
|
||||
font-size: 13px;
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
letter-spacing: 6px;
|
||||
user-select: none;
|
||||
background: linear-gradient(120deg, #dfeef3, #c8dfe8);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.login-error {
|
||||
margin: -4px 0 10px;
|
||||
color: var(--err);
|
||||
@@ -238,6 +214,11 @@ function handleLogin() {
|
||||
background: var(--brand-d);
|
||||
}
|
||||
|
||||
.login-submit:disabled {
|
||||
cursor: wait;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.login-tip {
|
||||
margin: 12px 0 0;
|
||||
padding: 7px;
|
||||
|
||||
Reference in New Issue
Block a user