首页-前端实现：精致且安全的用户登录页面

在项目标前端部门，我们计划了一个现代化且安全的用户登录页面，采用了 Vue 3 和 Element Plus 构建，提供了简洁、直观的用户体验。登录界面包罗了用户名、密码、验证码等字段，并通过异步请求与后端交互，验证用户身份。除了传统的登录方式，我们还集成了 SSE 消息推送，实现了登录成功后的即时通知。
1. 用户登录表单

登录表单采用了 Element Plus 的 el-form 组件，共同表单验证功能，确保用户输入的合法性。表单字段包罗：

• 用户名：用户输入的用户名，必填项。
  
• 密码：用户密码，必填项。
  
• 验证码：用于增强登录的安全性，防止恶意登录。
  1. <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef">
  2.   <el-form-item prop="userName">
  3.     <el-input
  4.       v-model="loginForm.userName"
  5.       placeholder="用户名"
  6.       :prefix-icon="User"
  7.     />
  8.   </el-form-item>
  9.   <el-form-item prop="password">
  10.     <el-input
  11.       v-model="loginForm.password"
  12.       type="password"
  13.       placeholder="密码"
  14.       :prefix-icon="Lock"
  15.       @keyup.enter="handleLogin"
  16.     />
  17.   </el-form-item>
  18.   
  19.   <el-form-item prop="captcha" class="captcha-item">
  20.     <div class="captcha-input-wrapper">
  21.       <el-input
  22.         v-model="loginForm.captcha"
  23.         placeholder="请输入验证码"
  24.         :prefix-icon="Key"
  25.         @keyup.enter="handleLogin"
  26.       />
  27.       <div
  28.         class="captcha-box"
  29.         @click="refreshCaptcha"
  30.         ref="captchaRef"
  31.       >
  32.         {{ captchaText }}
  33.       </div>
  34.     </div>
  35.   </el-form-item>
  36. </el-form>

  复制代码
  2. 验证码生成与样式应用
  
  验证码生成是通过异步请求获取的，每次登录时都会生成新的验证码，增强系统的安全性。验证码采用了随机字符和干扰线的方式，增加识别难度，从而防止机器主动破解。
  
  1. const getCaptcha = async () => {
  2.   try {
  3.     sessionKey.value = generateUUID()
  4.     const res = await request.get('/api/user-service/captcha', {
  5.       params: { sessionKey: sessionKey.value }
  6.     })
  7.     if (res.success && res.code === '0') {
  8.       captchaText.value = res.data
  9.       await nextTick(() => {
  10.         if (captchaRef.value) {
  11.           applyRandomStyle()
  12.         }
  13.       })
  14.     }
  15.   } catch (error) {
  16.     console.error('获取验证码失败:', error)
  17.   }
  18. }

  复制代码
  样式方面，验证码的每个字符都应用了随机颜色和旋转角度，且配景利用了动态生成的干扰线，使验证码看起来更加复杂。
  

3. 登录处置处罚与加密

用户输入的密码会进行加密处置处罚，以确保其安全性。我们利用了 RSA 解密和加密算法，并将加密后的密码传递给后端。登录请求通过 userStore.login 发送，登录成功后用户会被跳转到主页面。

1. const handleLogin = async () => {
2.   if (!loginFormRef.value) return
3.   
4.   await loginFormRef.value.validate(async (valid) => {
5.     if (valid) {
6.       loading.value = true
7.       try {
8.         const encryptedPassword = encrypt(loginForm.password)
9.         
10.         const res = await userStore.login({
11.           ...loginForm,
12.           password: encryptedPassword,
13.           sessionKey: sessionKey.value
14.         })
15.         
16.         if (res.code === '0' && res.data) {
17.           ElMessage.success('登录成功')
18.           await nextTick()
19.           router.replace('/')
20.           onUnmounted(() => {
21.             if (sseClient.isConnected()) {
22.                 sseClient.close()
23.             }
24.           })
25.           window.addEventListener('sse-message', handleSSEMessage)
26.         } else {
27.           ElMessage.error(res.message || '登录失败')
28.           refreshCaptcha()
29.         }
30.       } catch (error) {
31.         ElMessage.error(error.message || '登录失败')
32.         refreshCaptcha()
33.       } finally {
34.         loading.value = false
35.       }
36.     }
37.   })
38. }

复制代码

4. 异步消息推送（SSE）

为了提拔用户体验，登录成功后我们利用 SSE (Server-Sent Events) 技术实现了实时消息推送功能。当用户成功登录时，系统会推送一条接待消息，告知用户登录成功。

1. const handleSSEMessage = (event) => {
2.   const message = event.detail
3.   console.log('收到消息:', message)
4.   ElNotification({
5.     title: '新消息',
6.     message: message.content,
7.     type: 'info'
8.   })
9. }

复制代码

5. 请求工具与拦截器

我们封装了请求工具类 request，利用 Axios 处置处罚后端 API 请求。请求拦截器主动附加用户的 Authorization Token，相应拦截器处置处罚后端返回的结果并进行相应的错误提示。

1. const request = axios.create({
2.   timeout: 10000,
3.   headers: {
4.     'Content-Type': 'application/json'
5.   }
6. })
8. request.interceptors.request.use(
9.   config => {
10.     const token = localStorage.getItem('accessToken')
11.     if (token) {
12.       config.headers['Authorization'] = token
13.     }
14.     return config
15.   },
16.   error => {
17.     return Promise.reject(error)
18.   }
19. )
21. request.interceptors.response.use(
22.   response => {
23.     const res = response.data
24.     if (res.success === true && res.code === '0') {
25.       return res
26.     } else {
27.       ElMessage.error(res.message || '请求失败')
28.       return Promise.reject(new Error(res.message || '请求失败'))
29.     }
30.   },
31.   error => {
32.     if (error.response?.status === 401) {
33.       localStorage.removeItem('accessToken')
34.       localStorage.removeItem('userInfo')
35.       router.push('/login')
36.       ElMessage.error('登录已过期，请重新登录')
37.     } else {
38.       ElMessage.error(error.message || '请求失败')
39.     }
40.     return Promise.reject(error)
41.   }
42. )

复制代码

总结

通过 Vue 3 和 Element Plus 构建的登录页面，不但简洁易用，还实现了多种安全验证手段，如密码加密、验证码和 SSE 实时消息推送等。整个登录流程与后端紧密联合，确保了用户数据的安全性，同时优化了用户体验。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。