若依-登陆

Mar 14, 2022

登录(若依)

参考文献

● https://blog.csdn.net/liuzixin_lzx/article/details/113172451

方法解析

handleLogin

created中获取验证码图片（getCodeImg接口）和cookie（有cookie则填入表单） 1、表单校验是否通过 2、判断是否记住密码（记住则将账号密码存入cookie，否则删除cookie已有的信息） 3、触发vuex中Login方法

created() {
  this.getCode();
  this.getCookie();
},
methods: {
  getCode() {
    getCodeImg().then(res => {
      this.codeUrl = "data:image/gif;base64," + res.img;
      this.loginForm.uuid = res.uuid;
    });
  },
  getCookie() {
    const username = Cookies.get("username");
    const password = Cookies.get("password");
    const rememberMe = Cookies.get('rememberMe')
    this.loginForm = {
      username: username === undefined ? this.loginForm.username : username,
      password: password === undefined ? this.loginForm.password : decrypt(password),
      rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
    };
  },
  handleLogin() {
    this.$refs.loginForm.validate(valid => {
      if (valid) {
        this.loading = true;
        if (this.loginForm.rememberMe) {
          Cookies.set("username", this.loginForm.username, { expires: 30 });
          Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
          Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
        } else {
          Cookies.remove("username");
          Cookies.remove("password");
          Cookies.remove('rememberMe');
        }
        this.$store
          .dispatch("Login", this.loginForm)
          .then(() => {
            this.$router.push({ path: this.redirect || "/" });
          })
          .catch(() => {
            this.loading = false;
            this.getCode();
          });
      }
    });
  }
}

4、将账号信息作为参数请求login接口 5、请求成功获取token存入cookie

import { login, logout, getInfo } from '@/api/login'
......
actions: {
    // 登录
    Login({ commit }, userInfo) {
      const username = userInfo.username.trim()
      const password = userInfo.password
      const code = userInfo.code
      const uuid = userInfo.uuid
      return new Promise((resolve, reject) => {
        login(username, password, code, uuid).then(res => {
          setToken(res.token)
          commit('SET_TOKEN', res.token)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },
    ......
 }

6、resolve后跳转页面完成登录

记住密码失效问题

在直播项目的平台和后台登陆中都发现了一个bug，选择记住密码后重新登录显示密码错误并且在控制台打印报错如下：

查找原因：

import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'
// 公钥
const publicKey =
    'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdH\n' +
    'nzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ=='
// 私钥
const privateKey =
    'MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEAqhHyZfSsYourNxaY7Nt+PrgrxkiA50efORdI5U5lsW79MmFnusUA355oaSXcLhu5xxB38SMSyP2KvuKNPuH3owIDAQABAkAfoiLyL+Z4lf4Myxk6xUDgLaWGximj20CUf+5BKKnlrK+Ed8gAkM0HqoTt2UZwA5E2MzS4EI2gjfQhz5X28uqxAiEA3wNFxfrCZlSZHb0gn2zDpWowcSxQAgiCstxGUoOqlW8CIQDDOerGKH5OmCJ4Z21v+F25WaHYPxCFMvwxpcw99EcvDQIgIdhDTIqD2jfYjPTY8Jj3EDGPbH2HHuffvflECt3Ek60CIQCFRlCkHpi7hthhYhovyloRYsM+IS9h/0BzlEAuO0ktMQIgSPT3aFAgJYwKpqRYKlLDVcflZFCKY7u3UP8iWi1Qw0Y='
// 加密
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) // 对数据进行解密
}

解决方案：之前未配置私钥，私钥需与后端保持一致！！！

Back

To Top