自动登录

自动登录

1、设置cookie

2、获取cookie 反填

3、具体代码如下

<template>
  <div class="wrapper bg-image">
    <div class="login-container">
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
        <div class="title-logo">
          <el-image class="logo" src="/loginLogo.png" />
        </div>
        <div class="title-container">
          <div class="title">登录title</div>
        </div>

        <el-form-item prop="username" class="input-phone">
          <el-input
            ref="username"
            v-model="loginForm.mobile"
            class="phone"
            placeholder="请输入手机号"
            name="username"
            type="text"
            tabindex="1"
            auto-complete="on"
          />
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            :key="passwordType"
            ref="password"
            v-model="loginForm.password"
            :type="passwordType"
            placeholder="请输入密码"
            name="password"
            tabindex="2"
            auto-complete="on"
            @keyup.enter.native="handleLogin"
          />
        </el-form-item>
        <el-button
          type="primary"
          :loading="loading"
          class="login-btn"
          :disabled="disabled"
          @click.native.prevent="handleLogin"
        >登录</el-button>
        <div class="remember-pw">
          <div class="login-left-btn">
            <el-checkbox v-model="isAutoChecked" class="autoLogin" />
            <span class="text">自动登录</span>
          </div>
          <div class="login-right-btn">
            <router-link :to="{ path: '/retrieve' }">
              <span class="forgetPassword">忘记密码</span>
            </router-link>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mobileValidate, passwordValidate } from '@/utils/validate'

export default {
  data() {
    // 手机号码验证
    const checkPhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else if (!mobileValidate(value)) {
        callback(new Error('请输入正确手机号'))
      } else {
        callback()
      }
    }
    // 密码验证
    const validatePassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error('密码不能为空'))
      } else if (value.length < 6 || value.length > 14) {
        callback(new Error('密码应为6-14位'))
      } else if (!passwordValidate(value)) {
        callback(new Error('密码格式错误'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        mobile: '',
        password: ''
      },
      loginRules: {
        mobile: [{ required: true, trigger: 'blur', validator: checkPhone }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined,
      isAutoChecked: true
    }
  },
  computed: {
    disabled() {
      let disabled = true
      const { mobile, password } = this.loginForm
      if (mobile !== '' && password !== '' && passwordValidate(password)) {
        disabled = false
      }
      return disabled
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  mounted() {
    this.getCookie()
  },
  methods: {
    // 设置cookie
    setCookie(mobile, password, exdays) {
      // 获取时间
      var exdate = new Date()
      // 保存的天数
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays)
      // 字符串拼接cookie
      window.document.cookie = 'userName' + '=' + mobile + ';path=/;expires=' + exdate.toGMTString()
      window.document.cookie = 'userPwd' + '=' + password + ';path=/;expires=' + exdate.toGMTString()
    },
    // 读取cookie 将手机号和密码回填
    getCookie() {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split('; ')
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split('=')
          // 判断查找相对应的值
          if (arr2[0] === 'userName') {
            this.loginForm.mobile = arr2[1]// 保存到保存数据的地方
          } else if (arr2[0] === 'userPwd') {
            this.loginForm.password = arr2[1]
          }
        }
      }
    },
    // 登录
    handleLogin() {
      if (this.isAutoChecked) {
        // 传入手机号，密码，和保存天数
        this.setCookie(this.loginForm.mobile, this.loginForm.password, 7)
      } else {
        // 如果没有选中自动登录，那就清除cookie
        this.setCookie('', '', -1) // 修改值为空，天数为负1天就好了
      }
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          // this.$store.dispatch('user/login', this.loginForm).then(() => {
          this.$store.dispatch('user/login', { mobile: 'admin' }).then(() => {
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>