登录页面用md5对用户密码进行加密处理

最新推荐文章于 2024-08-03 10:07:50 发布

Ccoolor

最新推荐文章于 2024-08-03 10:07:50 发布

阅读量2.5k

点赞数 1

分类专栏： js MD5

本文链接：https://blog.csdn.net/as965874/article/details/110630134

版权

js 同时被 2 个专栏收录

26 篇文章 1 订阅

订阅专栏

MD5

1 篇文章 0 订阅

订阅专栏

需求:当用户进行登录时，对用户密码用md5进行加密处理。
下载MD5

npm install md5 --save

在页面引入md5

import md5 from 'md5'

密码输入框

  <!-- 密码 -->
        <el-form-item prop="password" style="margin-bottom: 25px">
          <el-input
            ref="password"
            show-password
            v-model="loginForm.password"
            type="password"
            prefix-icon="el-icon-lock"
            placeholder="密码"
          ></el-input>
        </el-form-item>

data数据

 data() {
    return {
      // 登录的表单区域绑定数据
      loginForm: {
        username: '',
        password: '',
        code: '',
      },
      //用于深拷贝的数据
      loginForm1: {
        username: '',
        password: '',
        code: '',
      },

methods

//md5加密
  encrypt() {
      this.loginForm1.password = md5(this.loginForm1.password)
    },
//监听登录按钮
 async login() {
  //进行深拷贝，其实登录时传递的用户名密码是loginForm1里面的数据，
  //防止出现用户名输入错误后点击登录导致密码也被转换为加密后的数据
      this.loginForm1 = JSON.parse(JSON.stringify(this.loginForm))
      await this.encrypt()
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return
        const { data: res } = await this.$http.post(
          '/login/login',
          qs.stringify(this.loginForm1)
        )
        // console.log(res)
        if (res.data.msg == '登录成功') {
          this.$message.success('登录成功')
          this.$router.push('/home')
        } 
      })
    },