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

小咪咪 2024-04-20 22:10 84阅读 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");
        }