开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第11天，点击查看活动详情

写在前面

上篇文章介绍了在vite+vue项目中编写记住密码和登录登出的逻辑代码，本篇文章介绍在vite+vue项目中限制登录账号和密码（先前端写死，实际对接接口后由后端判断，根据后端返回状态提示），并使用md5加密密码（前端加密）。

账号：admin
密码：admin

目前是只有一个登录页😂会慢慢完善

限制登录账号和密码

打开api文件夹下的Login.ts文件，对传过来的用户名和密码进行校验，如果校验通过，则code返回0，如果校验不通过，则code返回500，login方法改写为如下代码：

/**
 * 登录
 * @method login
 */
export const login = (params: any) => {
    //模拟接口
    return new Promise((resolve, reject) => {
        const { userName, passWord } = params
        if (userName === 'admin' && passWord === 'admin') {
            resolve({ code: 0, msg: '登录成功！', token: 'admin' })
        } else {
            resolve({ code: 500, msg: '账号或密码错误！' })
        }
    })
    // return Axios.get("/sys/oauth/token", {
    //     params: params
    // });
}

然后在Login.vue中改写handleLogin方法，对根据返回的状态给不同的提示，代码如下：

const handleLogin = async (formEl: FormInstance | undefined) => {
  if (loginBtnLoading.value) return;
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      loginBtnLoading.value = true;
      login(ruleForm).then((res: any) => {
        loginBtnLoading.value = false;
        // 如果选择了记住密码
        if (isRememberPW.value) {
          setRemember(
            JSON.stringify({
              userName: ruleForm.userName,
              passWord: ruleForm.passWord,
            })
          );
        } else {
          removeRemember();
        }
        const { code, msg } = res;
        if (code === 0) { // code等于表示账号密码输入正确，提示“登录成功”并跳转到首页
          const { token } = res;
          if (token) {
            setToken(token);
            ElMessage({
              message: msg,
              type: "success",
            });
            router.push({ path: "/" });
          } else {
            ElMessage.error("获取失败，请重试！");
          }
        } else { // 否则表示账号密码输入错误，提示“账号或密码错误！”
          ElMessage.error(msg);
        }
      });
    }
  });
};

使用md5加密密码

当前的密码传给后端的字段值是明文：

安装js-md5：npm install --save @types/js-md5，@types/js-md5是对js-md5进行类型定义的npm库，因为我们的项目使用TypeScript，所以使用@types/js-md5

我在项目中选择在main.ts中全局引入md5，在vue2中，我们通过Vue.prototype.$md5 = md5;这样的的代码来定义全局变量，然后在项目中通过this.$md5来使用，而这种写法在vue3中已经不存在，具体可以看官方说明，所以我们使用app.config.globalProperties.$md5 = md5;这样的代码来定义全局变量，然后在Login.vue中使用：

// 使用md5
import { getCurrentInstance, reactive, ref } from "vue";
const $md5 = getCurrentInstance()?.appContext.config.globalProperties.$md5;

// 将这段代码移到这里
if (isRememberPW.value) {
    setRemember(
      JSON.stringify({
        userName: ruleForm.userName,
        passWord: ruleForm.passWord,
      })
    );
} else {
    removeRemember();
}
// 增加这段代码
ruleForm.passWord = $md5(ruleForm.passWord);
login(ruleForm).then((res: any) => {...

同时需要修改api中的login方法代码：

// 将admin改成21232f297a57a5a743894a0e4a801fc3
if (userName === 'admin' && passWord === '21232f297a57a5a743894a0e4a801fc3')

如此就对密码使用了md5加密

写在最后

以上就是在vite+vue项目限制登录账号和密码，并使用md5加密密码的代码和说明

vite+vue项目之限制登录账号和密码，并使用md5加密密码

写在前面

限制登录账号和密码

使用md5加密密码

写在最后