登录界面基础校验

再看痛点，使用者在第一次输入账号或密码时失焦后无任何提示；提交表单时若未填写则报错信息模糊，影响体验。

基础数据的双向绑定

登录界面的 Element‑UI 组件由三层组成：el-form → el-form-item → el-input。通过 v-model 实现双向绑定。例如：

v-model="form.username"

表单校验配置

1. 表单对象字段需与接口字段保持一致，例如 username 与 password。

2. 规则对象采用嵌套数组形式：

3. rules: {
   username:,password:
   }

4. 关键点： required 设置必填项；message 校验失败提示；trigger 触发事件。

5. 说到组件绑定，:model="form" 与 :rules="rules";prop属性指定对应校验规则。

表单校验通过 el-form / el-form-item / el-input 协同完成。完整代码示例的观点是，

登录界面统一校验

说到痛点。若使用者未输入任何内容直接点击登录，程序仅依赖失焦校验无法捕获错误，导致“未知错误”。需要统一全局校验来兜底，

至于主要方法。调用表单实例的 validate

• 步骤一： 给 el‑form 添加 ref 并获取实例：

  this.$refs.form.validate

• 步骤二： 在回调中判断 valid 是否为 true，接下来才执行后续逻辑。
• 步骤三： 给登录按钮添加 @click=”loginHandler” 触发统一校验。
• - 示例代码已在上方展示。
  • - 测试场景1：无任何输入 → valid 为 false，阻止后续流程。
  • - 测试场景2：符合规则 → valid 为 true，允许继续操作。
  • - 调试技巧：在回调中 console.log 验证结果。

使用 Vuex 管理 token

痛点这方面。

• 刷新页面后 token 丢失导致需要重新登录，体验差。
• token 必须安全存储、防篡改，同时需支持跨页共享。

# 三大模块 #

• state: 'token'='' 初始化为空字符串或 cookie 中读取值；'getToken' 从 cookie 或 localStorage 获取值；不过，
• mutation: 'setToken'= 将 token 同步写入 state 并写入 cookie；'clearUserInfo'= 清空 state 与 cookie。
• action: 'asyncLogin'= 调用 loginAPI 接口并 commit setToken。

# store/modules/user.js #

// 主要代码
import { loginAPI } from '@/api/user'
import { getToken。setToken,removeToken } from '@/utils/auth'
export default {
namespaced:true,state:{ token:getToken || '' },mutations:{
setToken{ state.token=newToken;话说回来，setToken;
},clearUserInfo{ state.token='';removeToken，按理说，}
}。actions:{
async asyncLogin{
const res = await loginAPI;ctx.commit，}
}
}

登录后跳转到首页

Pain Point：如果先跳转再存 token，首页某些模块可能因为缺少 token 而报错或渲染异常。

• *确保先完成 asyncLogin 的 Promise 再跳转*.

token 持久化

Pain Point：Vuex 是内存状态。仅一次页面刷新即丢失，需要持久化以让使用者用起来更舒服。

• 存入 Vuex 一份、Cookie 一份；初始化优先从 Cookie 获取。• 在 utils/auth.js 封装操作：

添加 token 到请求头

Pain Point：每次请求手动添加 header 成了冗余工作，也容易忘记导致鉴权失败。

// utils/request.js
import axios from 'axios';import { getToken } from './auth';const service = axios.create({
baseURL:'https://api-hmzs.iima.net/v1',timeout:null // 可自行设置超时时间
});service.interceptors.request.use(
config=>{
const token=getToken;if{
config.headers.Authorization = `Bearer ${token}`;不过，// 后端可自行调整格式
}
return config;},error=>Promise.reject
);// 响应拦截器略，export default service;

记住我功能实现

Pain Point：不使用记住功能时每次打开页面都要重新输入账号和密码，耗时且易忘记！如果没有正确清理 localStorage，会出现前后端状态不一致的问题。**主要思路**： * 当 remember 为 true 时将完整表单 JSON 写入 localStorage；* 当 remember 为 false 时则清除对应键值；* 页面初始化读取并回填。