【vue学习】权限管理系统前端实现5-登录功能记住密码功能实现-蒲公英云

【vue学习】权限管理系统前端实现5-登录功能记住密码功能实现

小咪咪 2024-04-20 22:10 144阅读 0赞

1.登录逻辑

import {ref} from "vue";
  import requestUtil from '@/util/request'
  import qs from "qs";
  import {ElMessage} from "element-plus";
  import store from "@/store";
  const loginRef = ref(null)
  const loginForm = ref({
    username:"",
    password:""
  })
  const loginRules = {
    username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
    password: [{ required: true, trigger: "blur", message: "请输入您的密码" }]
  };
  const handleLogin=()=>{
    loginRef.value.validate(async (valid)=>{
      if(valid){
        try{
          let result=await requestUtil.post("login?"+qs.stringify(loginForm.value))
          let data=result.data;
          if(data.code==200){
            const token = data.authorization;
            store.commit('SET_TOKEN',token);
          }else{
            ElMessage.error(data.msg)
          }
        }catch(error){
          console.log("error:"+error);
          ElMessage.error("服务器出错，请联系管理员！")
        }
      }else{
        console.log("验证失败")
      }
    })
  }

1.ref

ref 的作用是将数据包装成一个响应式的引用，使得数据的变化可以被 Vue 自动追踪，并触发相应的重新渲染。当使用 ref 创建的数据引用发生变化时，可以通过 .value 属性来访问引用的实际值，例如 loginRef.value 或 loginForm.value。

2.方法写法

const handleLogin = () => { ... }：这行代码使用箭头函数的语法将一个匿名函数赋值给 handleLogin 变量。箭头函数是 JavaScript 中的一种函数定义方式，它可以简洁地定义一个函数而不需要使用 function 关键字。

= () => 是箭头函数的语法，用于定义一个没有参数的函数。

3.async 和 await 来配合实现等待异步操作

4.loginRef.value.validate(async (valid)=>{}进行表单验证验证方法是 loginRules

2.安装依赖

记住密码，我们通过cookie来实现，先安装依赖 ‘js-cookie’

存储用户密码，为了安全需要加密，获取密码解密。所以我们安装依赖’jsencrypt’

util下新建jsencrypt.js

import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'
// 密钥对生成 http://web.chacuo.net/netrsakeypair
const publicKey = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdH\n' +
  'nzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ=='
const privateKey = 'MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEAqhHyZfSsYourNxaY\n' +
  '7Nt+PrgrxkiA50efORdI5U5lsW79MmFnusUA355oaSXcLhu5xxB38SMSyP2KvuKN\n' +
  'PuH3owIDAQABAkAfoiLyL+Z4lf4Myxk6xUDgLaWGximj20CUf+5BKKnlrK+Ed8gA\n' +
  'kM0HqoTt2UZwA5E2MzS4EI2gjfQhz5X28uqxAiEA3wNFxfrCZlSZHb0gn2zDpWow\n' +
  'cSxQAgiCstxGUoOqlW8CIQDDOerGKH5OmCJ4Z21v+F25WaHYPxCFMvwxpcw99Ecv\n' +
  'DQIgIdhDTIqD2jfYjPTY8Jj3EDGPbH2HHuffvflECt3Ek60CIQCFRlCkHpi7hthh\n' +
  'YhovyloRYsM+IS9h/0BzlEAuO0ktMQIgSPT3aFAgJYwKpqRYKlLDVcflZFCKY7u3\n' +
  'UP8iWi1Qw0Y='
// 加密
export function encrypt(txt) {
  const encryptor = new JSEncrypt()
  encryptor.setPublicKey(publicKey) // 设置公钥
  return encryptor.encrypt(txt) // 对数据进行加密
}
// 解密
export function decrypt(txt) {
  const encryptor = new JSEncrypt()
  encryptor.setPrivateKey(privateKey) // 设置私钥
  return encryptor.decrypt(txt) // 对数据进行解密
}

3.记住密码逻辑

// 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
    if (loginForm.value.rememberMe) {
      Cookies.set("username", loginForm.value.username, { expires: 30 });
      Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 });
      Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 });
    } else {
      // 否则移除
      Cookies.remove("username");
      Cookies.remove("password");
      Cookies.remove("rememberMe");
    }