vue3 + Element-plus 开发后台管理系统（10）

刘勇_前端狗
329 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情

搭建登录架构解决方案与实现

完善登录表单校验

表单校验是表单使用的一个通用能力，在 element-plus 中想要为表单进行表但校验我们需要关注的是以下三点：

1、为 el-form 绑定 model 属性

2、为 el-form 绑定 rules 属性

3、为 el-form-item 绑定 prop 属性

保证以上三点即可为 el-form 添加表单校验功能

下面来看一看对应的代码

view/login

<template>
  <div class="login-container">
    <el-form class="login-form" :model="loginForm" :rules="loginRules">
      <el-form-item prop="username">
        <el-input
          v-model="loginForm.username"
        />
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { validatePassword } from './rules'

// 数据源
const loginForm = ref({
  username: 'super-admin',
  password: '123456'
})
// 验证规则
const loginRules = ref({
  username: [
    {
      required: true,
      trigger: 'blur',
      message: '用户名为必填项'
    }
  ],
  password: [
    {
      required: true,
      trigger: 'blur',
      validator: validatePassword()
    }
  ]
})
</script>

views/login/rules.js

export const validatePassword = () => {
  return (rule, value, callback) => {
    if (value.length < 6) {
      callback(new Error('密码不能少于6位'))
    } else {
      callback()
    }
  }
}

密码框状态通用处理

对于密码框存在两种状态：

1、密文状态

2、明文状态

该功能的实现为通用的处理方案，只需要动态修改 input 的 type 类型即可，其中：

1、password 为密文显示

2、text 为明文显示

下面为代码

<template>
  <div class="login-container">
    <el-form class="login-form" :model="loginForm" :rules="loginRules">
        <el-input
          :type="passwordType"
        />
        <span class="show-pwd">
          <svg-icon
            :icon="passwordType === 'password' ? 'eye' : 'eye-open'"
            @click="onChangePwdType"
          />
        </span>
      ...
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 处理密码框文本显示状态
const passwordType = ref('password')
const onChangePwdType = () => {
  if (passwordType.value === 'password') {
    passwordType.value = 'text'
  } else {
    passwordType.value = 'password'
  }
}
</script>

通用后台登录方案解析

处理完了表单的基本操作，接下来就是登录操作的实现了

对于登录操作在后台项目中其实是有着一套通用的解决方案的，具体可以分为以下几点：

1、封装 axios 模块

2、封装接口请求模块

3、封装登录请求动作

4、保存服务端返回的 token

5、登录鉴权

配置环境变量封装 axios 模块

现在我们正式开始封装 axios 模块

要知道，在正常的企业级项目开发中，都是存在着开发环境和生产环境这两种环境的，在不同的环境中我们使用的 BaseUrl 一般是不同的，这就要求我们封装的这个模块必须具备一种能力，那就是，根据当前环境的不同，使用不同的 BaseUrl

对于 @vue/cli 来说，它具备三种不同的模式

1、development

2、test

3、production

具体内容可以参考这里

所以我们想去解决这个问题，就要用 @vue/cli 的环境变量去解决

我们需要先创建两个文件

1、.env.development

2、.env.production

他们分别对应的是开发环境和生产环境

首先看一看他们的代码

.env.development

# 标志
ENV = 'development'

# base api
VUE_APP_BASE_API = '/api'

.env.production

# 标志
ENV = 'production'

# base api
VUE_APP_BASE_API = '/prod-api'

下边我们就可以创建 axios 模块了

创建 utils/request.js

import axios from 'axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

export default service

至此，axios 模块的封装就完成了，下边就是登录的业务逻辑了

avatar
文章
阅读
粉丝