其他分享
首页 > 其他分享> > vue+elementUl实现登录记住密码功能

vue+elementUl实现登录记住密码功能

作者:互联网

效果

思路:

采用cookie保存账户和密码。

如果勾选了记住密码,将用户名和密码保存在cookie中,设置cookie中数据保存的时间,过期清除cookie保存的值,

每次新登录的时候,获取本地保存的cookie值。

 

代码解析:

<el-input>标签加show-password可以控制密码的显示和隐藏

<el-checkbox v-model="checked" class="remeberPwd">记住密码</el-checkbox>
通过checked字段控制记住密码是否被选中,初始设为false。

 

          <el-card shadow="never">
              <el-form
                ref="loginForm"
                label-position="top"
                :rules="rules"
                :model="formLogin"
                size="default"
              >
                <el-form-item prop="username">
                  <el-input type="text" v-model="formLogin.username" placeholder="用户名" clearable>
                    <i slot="prepend" class="fa fa-user-circle-o"></i>
                  </el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input
                    @keyup.enter.native="handleBindPhone"
                    type="password"
                    v-model="formLogin.password"
                    placeholder="密码"
                    show-password
                    clearable
                  >
                    <i slot="prepend" class="fa fa-keyboard-o"></i>
                  </el-input>
                </el-form-item>
                <el-checkbox v-model="checked" class="remeberPwd">记住密码</el-checkbox>

                <el-button
                  size="default"
                  @click="handleBindPhone"
                  type="primary"
                  :loading="logining"
                  class="button-login"
                >登录</el-button>
              </el-form>
            </el-card>

data:

  data() {
    return {
      timeInterval: null,
      logining: false,

      // 表单校验
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ]
      },
      // 表单
      formLogin: {
        username: "",
        password: "",
      },
      // 记住密码checked
      checked: false
    };
  },

methods


  mounted() {

    this.account(); //获取cookie的方法
  },
    account() {
      // if (document.cookie.length <= 0) {
      console.log(this.getCookie("username"));
      this.formLogin.username = this.getCookie("username");
      this.formLogin.password = this.getCookie("password");
      // }
    },
    setCookie(c_name, c_pwd, exdate) {
      //账号,密码 ,过期的天数
      var exdate = new Date();

      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdate); //保存的天数
      document.cookie =
        "username=" + c_name + ";path=/;expires=" + exdate.toLocaleString();
      document.cookie =
        "password=" + c_pwd + ";path=/;expires=" + exdate.toLocaleString();
    },
    getCookie(name) {
      var arr = document.cookie.split(";");
      //["_ga=GA1.1.1756734561.1561034020", " mobile=123" password=456"]
      for (var i = 0; i < arr.length; i++) {
        var arr2 = arr[i].split("="); // ["_ga", "GA1.1.1756734561.1561034020"]
        if (arr2[0].trim() == name) {
          return arr2[1];
        }
      }
    },
    clearCookie() {
      this.setCookie("", "", -1); //清除cookie
    },
    // 提交登录信息
    handleBindPhone() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.logining = true;
          var _this = this;
          if (_this.checked == true) {
            //存入cookie
            _this.setCookie(
              _this.formLogin.username,
              _this.formLogin.password,
              7
            ); //保存7天
          } else {
            _this.clearCookie();
          }
          // 登录
          // 注意 这里的演示没有传验证码
          // 具体需要传递的数据请自行修改代码
          this.login({
            username: this.formLogin.username,
            password: this.formLogin.password
          })
            .then(() => {
              Ajax(
                {
                  // 获取用户信息
                  methods: "get",
                  url: "/account/info"
                },
                res => {
                  // console.log('用户信息', res)
                  util.cookies.set("uuid", res.data.id);
                  this.$store.dispatch(
                    "d2admin/user/set",
                    {
                      name: res.data.username
                    },
                    { root: true }
                  );
                }
              );
            })
            .then(() => {
              Ajax(
                {
                  // 获取侧边栏后再进入
                  methods: "get",
                  url: "/rule/menu"
                },
                res => {
                  this.$store.commit(
                    "d2admin/menu/asideSet",
                    this.changeData(res.data)
                  );
                  this.$router.replace(this.$route.query.redirect || "/");
                }
              );
            });
        } else {
          // 登录表单校验失败
          this.$message.error("表单校验失败,请检查");
        }
      });
    }

 

 

 

 

 

 

 

 

标签:username,elementUl,vue,登录,res,密码,cookie,formLogin,password
来源: https://blog.csdn.net/weixin_39089928/article/details/110231770