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

写在前面

上篇文章介绍了在vite+vue项目中编写登录页面的代码，本篇文章介绍在vite+vue项目中编写记住密码和登录登出的逻辑代码。

登录逻辑

我们先定义一个let loginBtnLoading = ref(false);变量，用来点击登录按钮后，控制登录按钮的loading，然后给按钮绑定：

<el-button
    type="primary"
    @click="handleLogin(ruleFormRef)"
    v-loading="loginBtnLoading"
    >登 录</el-button
>

接着在src目录的api文件夹下新建一个Login.ts文件，里面写模拟接口的代码：

import Axios from "./request";

/**
 * 登录
 * @method login
 */
export const login = (params: any) => {
    // 模拟接口返回一个Promise
    return new Promise((resolve, reject) => {
        resolve(params.userName)
    })
    // return Axios.get("/sys/oauth/token", {
    //     params: params
    // });
}

然后在Login.vue中引入这个方法，在点击登录按钮后调用这个方法，调用成功后保存返回的token（通过），弹出登录成功的提示并跳转到Home页面。

记住密码逻辑

先判断是否有缓存的账号和密码，若是有，就将缓存的账号密码赋值给ruleForm，在点击登录按钮后，判断是否记住密码，若是点击了记住密码就把账号密码存到缓存里。

同时在utils下的storage.ts文件下新增如下代码：

export const getRemember = () => localStorage.getItem("tongbai_remember") || '';
export const setRemember = (val: any) => localStorage.setItem("tongbai_remember", val);
export const removeRemember = () => localStorage.removeItem("tongbai_remember");

最终Login.vue ts代码如下：

<script setup lang="ts">
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { User, Lock } from "@element-plus/icons-vue";
import { login } from "@/api/Login";
import {
  setToken,
  getRemember,
  setRemember,
  removeRemember,
} from "../utils/storage";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  userName: "",
  passWord: "",
});
const rules = reactive<FormRules>({
  userName: [{ required: true, message: "请输入用户名", trigger: "change" }],
  passWord: [
    {
      required: true,
      message: "请输入密码",
      trigger: "change",
    },
    { min: 3, max: 20, message: "长度应为3-20", trigger: "blur" },
  ],
});

const router = useRouter();

let isRememberPW = ref(Boolean(getRemember()));
let loginBtnLoading = ref(false);

if (isRememberPW.value) {
  let { userName, passWord } = JSON.parse(getRemember());
  ruleForm.userName = userName;
  ruleForm.passWord = passWord;
}

const handleLogin = async (formEl: FormInstance | undefined) => {
  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 { token } = res;
        if (token) {
          setToken(token);
          ElMessage({
            message: "登录成功！",
            type: "success",
          });
          router.push({ path: "/" });
        } else {
          ElMessage.error("获取失败，请重试！");
        }
      });
    }
  });
};
</script>

登出逻辑

在Home页面增加一个退出登录的按钮，点击退出登录后跳转至登录页面，并走模拟的退出登录的接口，退出登录的同时清除缓存中的token，模拟的接口写在api下的login.ts中：

import { removeToken } from "@/utils/storage";

/**
 * 登出
 * @method logout
 */
export const logout = () => {
    removeToken()
    //模拟接口
    return new Promise((resolve, reject) => {
        resolve('success')
    })
    // return Axios.post("/sys/oauth/logout");
}

Home.vue中的代码变成如下：

<template>
  <el-button type="primary" @click="toggle">{{
    collapse ? "展开" : "折叠"
  }}</el-button>
  <el-button type="primary" @click="handleLogout">退出登录</el-button>
</template>

<script setup lang="ts">
import store from "@/store";
import { computed } from "@vue/runtime-core";
import { useRouter } from "vue-router";
import { logout } from "@/api/Login";

const collapse = computed(() => store.webStore.collapse);

const router = useRouter();

const toggle = () => {
  store.webStore.toggleCollapse();
};

const handleLogout = () => {
  logout().then((res) => {
    router.push({ path: "/login" });
  });
};
</script>

<style lang="less" scoped>
</style>

此时我们在登录页面点击登录按钮就进到Home页面，并且可以从Home页面顺利退出。

写在最后

以上就是在vite+vue项目中编写记住密码和登录登出的逻辑代码的说明

vite+vue项目之编写记住密码和登录登出的逻辑代码

写在前面

登录逻辑

记住密码逻辑

登出逻辑

写在最后