登录页

LoginPage.vue

依赖：ref

关键架构

• 登录卡片
  • 错误提示
  • 表单
    • 账号输入框
    • 密码输入框
    • 登录按钮
• 检查输入格式
• 发送登录请求
• 居中
• 卡片样式
• 按钮样式

1. 登录卡片样式居中
2. 创建表单收集登录数据
3. 表单数据同步到 js 变量
4. 添加登录执行请求登录函数
5. 加入校验规则验证合法
6. 发送请求前再次验证
7. 错误提示反馈账号密码错误

实现

创建表单

登录页至少包含一个表单提交登录信息，下面采用 el-form 表单

ref="formRef" 将组件保存到实例中，可以调用函数

@submit.prevent="onSubmit" 是监听条件执行函数，其中 @ 是 v-on 的缩写，满足提交 submit 条件（.prevent 是事件修饰符，阻止重新加载页面）后执行 onSubmit 自定义函数。

<el-form
	ref="formRef"
	:model="form"
	:rules="rules"
	size="large"
	@submit.prevent="onSubmit"
>
	<el-form-item prop="account">
		<el-input></el-input>
	</el-form-item>
 
	<el-form-item prop="password">
		<el-input></el-input>
	</el-form-item>
 
	<el-form-item>
		<el-button>登录</el-button>
	</el-form-item>
</el-form>

每一个提交项都需要使用 el-form-item 来包裹，添加 prop 属性指定绑定验证规则。上面例子中的 prop="account" 对应的验证规则是：下面的 rules.account

const rules = {
    account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}

数据提交

提交前再次进行规则验证，通过调用 form 的函数 validate()，如果有问题就直接结束提交函数

async function onSubmit() {
    try {
        await formRef.value.validate()
    } catch {
        return
    }
 
    loading.value = true
    error.value = null
 
    try {
        const res = await login(form.value)
        authStore.setAuth(res.accessToken, res.refreshToken, res.user)
    } catch {
        error.value = '账号或密码错误，请重试'
    } finally {
        loading.value = false
    }
}

验证通过后发送登录请求，异步等待 await login(form.value)
本地存储登录 token
如果返回错误，将展示 error 错误提示

<el-alert v-if="error" show-icon :title="error" type="error" class="login-error"/>