Vben admin 实现登录记住密码

最新推荐文章于 2023-07-25 23:27:21 发布

xiaofiy

最新推荐文章于 2023-07-25 23:27:21 发布

阅读量573

点赞数 2

文章标签： vben-admin vben 记住密码 vben记住密码 vben自动填充用户名和密码

本文链接：https://blog.csdn.net/xiaofiy/article/details/129037335

版权

安装插件

npm i js-cookie

在登陆文件中引入

import Cookies from "js-cookie";

Dom部分

<FormItem>
  <!-- 记住密码按钮 -->
   <Checkbox v-model:checked="remember" size="small">
     {{ t('sys.login.rememberMe') }}
   </Checkbox>
 </FormItem>

Ts部分

1、定义字段

// 定义记住密码开关
const remember = ref(false);
// 定义用户名和密码
const formData = reactive({
    account: '',
    password: '',
  });

2、页面加载调用记住密码方法

 onMounted(() => {
    getCookie()
  })

3、获取Cookie 记住用户名及密码


  const getCookie = () => {
    const username = Cookies.get("username");
    const password = Cookies.get("password");
    const rememberMe = Cookies.get('rememberMe')
    
    formData.account = username === undefined ? formData.account : username
    formData.password = password === undefined ? formData.password : password
    remember.value = rememberMe === undefined ? false : Boolean(rememberMe)
  }

4、登录操作


async function handleLogin() {
    const data = await validForm();
    if (!data) return;
    try {
      loading.value = true;
      //  Cookies.set 存储用户名和密码  参数1 key值  参数2 value  参数3有效时间
      if (remember.value) {
        Cookies.set("username", data.account, { expires: 30 });
        Cookies.set("password", data.password, { expires: 30 });
        Cookies.set('rememberMe', remember.value, { expires: 30 });
      } else {
        Cookies.remove("username");
        Cookies.remove("password");
        Cookies.remove('rememberMe');
      }

      const userInfo = await userStore.login({
        password: data.password,
        username: data.account,
        // code: data.code,
        // uuid: unref(uuid),
        mode: 'none', //不要默认的错误提示
      });
      if (userInfo) {
        notification.success({
          message: t('sys.login.loginSuccessTitle'),
          description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realName}`,
          duration: 3,
        });
      }
    } catch (error) {
      // refreshImg();
      createErrorModal({
        title: t('sys.api.errorTip'),
        content: (error as unknown as Error).message || t('sys.api.networkExceptionMsg'),
        getContainer: () => document.body.querySelector(`.${prefixCls}`) || document.body,
      });
    } finally {
      loading.value = false;
    }
  }

注意：
Ant Design Vue表单自动填充账号密码问题
问题：
打开表单账号密码会自动填充

原因：
现代浏览器实现了内建的密码管理功能：当用户在一个网站上输入了用户名和密码，浏览器会为用户提供记忆功能。当用户再次访问这个网站时，浏览器使用保存的值自动填写登录字段

解决办法：
在密码框加入了autocomplete=“new-password”，阻止密码字段的自动填充，写入这个之后账号也跟着不填充了。

<FormItem name="password" class="enter-x">
   <InputPassword
     autocomplete="new-password"
     size="large"
     visibilityToggle
     v-model:value="formData.password"
     :placeholder="t('sys.login.password')"
   />
 </FormItem>